/* ============================================================
   tokens.css — design token ทั้งหมดของเว็บโรงเรียน
   โทน: น้ำเงินกรมท่า–ทอง ระดับเว็บบริษัทมหาชน
   ไฟล์อื่นห้ามมีค่า hex หรือระยะห่างลอย ๆ — อ้างตัวแปรจากที่นี่เท่านั้น
   ============================================================ */

/* ---------- @font-face : Prompt (หัวเรื่อง) ---------- */
/* subset ไทย */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/prompt-600-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/prompt-700-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* subset ละติน */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/prompt-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/prompt-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- @font-face : Trirong (พาดหัวโชว์ — serif ไทยเชิงสถาบัน) ----------
   ใช้เฉพาะพาดหัวใหญ่ (hero, section title, ชื่อโรงเรียน) น้ำหนักเบา-กลาง
   ให้บุคลิก "สถาบันเก่าแก่ มีฐานะ" — Prompt ยังคงใช้กับหัวเล็ก/ปุ่ม/เมนู */
/* subset ไทย */
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/trirong-500-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/trirong-600-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* subset ละติน */
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/trirong-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/trirong-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- @font-face : Sarabun (เนื้อความ) ---------- */
/* subset ไทย */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/sarabun-400-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/sarabun-500-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/sarabun-600-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* subset ละติน */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/sarabun-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/sarabun-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/sarabun-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- ตัวแปร design token ---------- */
:root {
  /* --- สีหลัก --- */
  --color-navy-900: #0B1F3A;      /* navy กรมท่าเข้ม: hero, footer */
  --color-navy-700: #13294B;      /* navy กลาง: การ์ดบนพื้นเข้ม, hover navbar */
  --color-gold-500: #C6A75E;      /* ทอง: accent เท่านั้น */
  --color-cream: #F3EDDF;         /* เบจนวลอุ่น: พื้นหลัก (โทนหรู navy–เบจ) */
  --color-ivory-100: #E9DFCB;     /* เบจเข้ม (แซนด์): section สลับ */
  --color-ink-900: #1A2332;       /* ตัวอักษรหลัก */

  /* --- สีอนุพันธ์ (มีเหตุผลกำกับ) --- */
  --color-gold-400: #D6BC7E;      /* ทองอ่อน: hover ของปุ่ม/ลิงก์ทอง */
  --color-gold-700: #715C2C;      /* ทองเข้ม (บรอนซ์): ตัวอักษร/กรอบโฟกัสบนพื้นเบจทุกเฉด (คอนทราสต์ ≥4.5:1) */

  /* --- พื้นผิว navy หรูหรา: ไล่เฉดหลายชั้น + ลายเส้นทองจาง + glow + vignette
     (แทนพื้น navy เรียบเดิม ใช้ร่วมกันใน hero / page-hero / cta-band / footer)
     แนวคิด: ความวาวแบบโลหะขัดเงาของสถาบัน ไม่ใช่แสงไฟดิสโก้ — ทองทุกชั้นคง
     เป็น accent จาง (alpha ต่ำ) เพื่อไม่ให้คอนทราสต์ตัวอักษรขาว/ทองบนพื้นตก --- */
  --grad-navy-deep: linear-gradient(155deg, #17376A 0%, #0E2444 42%, #0B1F3A 68%, #071527 100%);
  --grad-navy-mid: linear-gradient(155deg, #1D3F73 0%, #163564 40%, #13294B 70%, #0B1F3A 100%);
  --sheen-gold: radial-gradient(130% 95% at 88% -6%,
      rgba(198, 167, 94, 0.22) 0%,
      rgba(198, 167, 94, 0.08) 35%,
      rgba(198, 167, 94, 0) 65%);   /* ประกายทองมุมขวาบน คล้ายแสงตกกระทบโลหะขัดเงา */
  --glow-navy-corner: radial-gradient(85% 70% at 6% 108%,
      rgba(198, 167, 94, 0.10) 0%,
      rgba(198, 167, 94, 0) 60%);   /* glow ทองจางมุมล่างซ้าย ถ่วงสมดุลกับ sheen-gold */
  --pattern-hairline-gold: repeating-linear-gradient(120deg,
      rgba(198, 167, 94, 0.05) 0px,
      rgba(198, 167, 94, 0.05) 1px,
      transparent 1px,
      transparent 64px);   /* เส้นลายทองบางแนวเฉียง ระยะซ้ำ 64px ตามสเกลระยะห่างของโปรเจกต์ */
  --vignette-navy: radial-gradient(120% 110% at 50% 45%,
      rgba(7, 21, 39, 0) 55%,
      rgba(7, 21, 39, 0.35) 100%);   /* ขอบมืดจางเพิ่มมิติความลึก ไม่ทึบจนเป็น vignette จัด */
  --overlay-hero: linear-gradient(150deg,
      rgba(14, 44, 84, 0.90) 0%,
      rgba(11, 31, 58, 0.93) 50%,
      rgba(7, 21, 39, 0.96) 100%);   /* เฉด navy โปร่งแสงคลุมภาพพื้นหลัง hero ให้ตัวอักษรขาว/ทองอ่านชัด (คอนทราสต์ ≥4.5 ทุกจุด) */
  /* --- พื้นผิวสว่างแบบซาติน + บรรยากาศวัด (โทนไล่หรู) --- */
  --sheen-cream: radial-gradient(130% 92% at 50% -8%,
      rgba(255, 253, 246, 0.85) 0%,
      rgba(255, 253, 246, 0) 52%);   /* แสงนวลนุ่มจากด้านบน ให้พื้นครีมดูมีมิติ (เงาวาวด้าน) */
  --grad-ivory: linear-gradient(180deg, #ECE2CE 0%, #E1D5BB 100%);   /* เบจซาติน (ไล่โทนอุ่นลงล่าง) */
  --overlay-temple: linear-gradient(135deg,
      rgba(251, 247, 238, 0.90) 0%,
      rgba(247, 240, 227, 0.93) 55%,
      rgba(242, 233, 214, 0.92) 100%);   /* เฉดครีมโปร่งไล่ทแยง คลุมภาพวัดให้จางแบบหรู อ่านง่าย */
  --color-gold-100: #F3ECDC;      /* ทองจางมาก: พื้นป้าย/ไฮไลต์เล็ก ๆ */
  --line-gold-soft: rgba(198, 167, 94, 0.45);  /* เส้น hairline ทองจาง: ขอบ/เส้นคั่นแบบสุขุม */
  --line-gold-faint: rgba(198, 167, 94, 0.28); /* เส้นทองจางมาก: ขอบ hover การ์ด */

  /* --- กรอบแมตต์ (passe-partout): รูปนั่งในพื้นครีมเว้นขอบ + เส้นทอง hairline
     เหมือนภาพใส่แผ่นแมตต์ก่อนเข้ากรอบในหอศิลป์ — ยกทุกรูปให้ดูตั้งใจ --- */
  --mat-bg: #FBF8F1;              /* ครีมสว่างกว่าพื้น section เล็กน้อย (ผิวแมตต์) */
  --mat-pad: 10px;               /* ระยะเว้นรอบรูปในกรอบแมตต์ */
  --mat-line: rgba(198, 167, 94, 0.55);  /* เส้นทอง hairline ในกรอบแมตต์ */

  /* --- พื้นผิว "วัสดุ": เกรนละเอียดจาง ๆ บนพื้น navy ให้รู้สึกมีเนื้อ ไม่เพิ่มสี
     SVG feTurbulence tiled 140px, opacity ต่ำมาก — layer บนสุดของพื้น navy --- */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  --color-white: #FFFFFF;         /* พื้นขาว section สลับ + ตัวอักษรบนพื้นเข้ม */
  --color-ink-600: #465062;       /* ตัวอักษรรอง: คำโปรย, คำอธิบายการ์ด */
  --color-ink-inverse-soft: #C8D0DE; /* ตัวอักษรรองบนพื้น navy (footer, hero โปรย) */
  --color-line-200: #E4E1D9;      /* เส้นขอบอ่อนบนพื้นสว่าง (การ์ด, คั่น) */
  --color-line-navy: #24395C;     /* เส้นคั่นบนพื้น navy (ใน footer) */
  --color-placeholder: #D7DCE4;   /* กล่อง placeholder รูป/แผนที่ */

  /* --- สเกลระยะห่าง (ชุดเดียวทั้งเว็บ) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;   /* จังหวะหายใจของ section บน desktop — ความโปร่งคือความหรู */

  /* --- ฟอนต์ --- */
  --font-heading: 'Prompt', 'Leelawadee UI', 'Segoe UI', sans-serif;
  --font-display: 'Trirong', 'Prompt', 'Leelawadee UI', serif;  /* พาดหัวโชว์: serif ไทยเชิงสถาบัน */
  --font-body: 'Sarabun', 'Leelawadee UI', 'Segoe UI', sans-serif;

  /* ขนาดตัวอักษร (เนื้อความ >= 15px เสมอ) */
  --text-sm: 15px;      /* ข้อความเล็กสุดที่อนุญาต: eyebrow, meta */
  --text-base: 17px;    /* เนื้อความหลัก */
  --text-lg: 19px;      /* คำโปรย, ข้อความนำ */
  --text-xl: 22px;      /* หัวการ์ด */
  --text-2xl: 28px;     /* หัวเรื่องรอง */
  --text-3xl: 36px;     /* หัวเรื่อง section */
  --text-4xl: 52px;     /* พาดหัว hero (desktop) — ใหญ่แต่น้ำหนักเบา = สง่า ไม่ตะโกน */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.3;   /* หัวเรื่อง */
  --leading-body: 1.75;   /* เนื้อความไทยต้องโปร่ง */

  --tracking-wide: 0.1em; /* ระยะห่างตัวอักษรป้ายเล็ก (eyebrow, label) — โปร่ง = พรีเมียม */

  /* --- เงา (ชุดเดียวทั้งเว็บ) — จางลงจากเดิม: ของหรูใช้ hairline นำ เงาตาม --- */
  --shadow-card: 0 1px 10px rgba(11, 31, 58, 0.05);
  --shadow-lift: 0 10px 26px rgba(11, 31, 58, 0.10);   /* เงายกตัวตอน hover การ์ด/ปุ่ม */

  /* --- ขอบมน — เหลี่ยมขึ้นเล็กน้อย: อ่านว่า "สุขุม" ไม่ใช่ "น่ารัก" --- */
  --radius-card: 6px;     /* การ์ด, กล่อง placeholder */
  --radius-btn: 4px;      /* ปุ่ม, ช่องกรอก */

  /* --- ความเร็ว transition — ของหรูเคลื่อนช้าและนุ่ม --- */
  --speed-fast: 150ms;    /* focus/สลับสีเล็ก ๆ */
  --speed-menu: 200ms;    /* เมนูมือถือเปิด-ปิด */
  --speed-slow: 380ms;    /* hover การ์ด/ปุ่ม/ลิงก์ — นุ่มแบบตั้งใจ */
  --speed-zoom: 650ms;    /* ซูมรูปแกลเลอรี — ช้าแบบสารคดี */

  /* --- โทนรูปถ่าย: คุมทุกรูปให้เป็นตระกูลเดียวกัน (ลดสดนิด อุ่นนิด) --- */
  --photo-tone: saturate(0.86) contrast(1.03) sepia(0.06);

  /* --- โครงหน้า --- */
  --container-max: 1200px;  /* ความกว้างเนื้อหาสูงสุด */
  --measure-max: 62ch;      /* จำกัดความยาวบรรทัดข้อความ (~75 ตัวอักษร) */
  --measure-lead: 48ch;     /* คำโปรย hero/section — บรรทัดสั้นกว่าเนื้อความ ดูตั้งใจ */
}