/* ============================================================
   ForeToday Design Tokens
   "A Better Tomorrow Starts Today"
   ============================================================ */

/* Brand font files — variable axes loaded from /fonts.
   Outfit:           weight 100–900
   Noto Sans Thai:   weight 100–900, width 62.5–100 */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('fonts/NotoSansThai-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/NotoSansThai-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Color: Brand --------- */
  --ft-deep-orange: #ff582d;
  --ft-mid-orange:  #fe6d00;
  --ft-gold:        #ffab24;
  --ft-charcoal:    #2d2b2b;
  --ft-white:       #f7f7f7;
  --ft-pure-white:  #ffffff;

  /* -------- Color: Signature gradient -------- */
  --ft-gradient:           linear-gradient(135deg, #ff582d 0%, #fe6d00 50%, #ffab24 100%);
  --ft-gradient-horizontal:linear-gradient(90deg,  #ff582d 0%, #fe6d00 50%, #ffab24 100%);
  --ft-gradient-radial:    radial-gradient(circle at 30% 30%, #ffab24 0%, #fe6d00 40%, #ff582d 100%);

  /* -------- Color: Semantic (light surface) -------- */
  --ft-fg-1: #2d2b2b;                       /* primary text */
  --ft-fg-2: rgba(45, 43, 43, 0.72);        /* secondary text */
  --ft-fg-3: rgba(45, 43, 43, 0.52);        /* tertiary / captions */
  --ft-fg-4: rgba(45, 43, 43, 0.32);        /* disabled / placeholders */
  --ft-bg-1: #f7f7f7;                       /* page surface */
  --ft-bg-2: #ffffff;                       /* card surface */
  --ft-bg-3: #efeeec;                       /* inset / pressed */
  --ft-border: rgba(45, 43, 43, 0.08);
  --ft-border-strong: rgba(45, 43, 43, 0.16);

  /* -------- Color: Semantic (dark surface, inverse) -------- */
  --ft-fg-1-inv: #f7f7f7;
  --ft-fg-2-inv: rgba(247, 247, 247, 0.72);
  --ft-fg-3-inv: rgba(247, 247, 247, 0.52);
  --ft-fg-4-inv: rgba(247, 247, 247, 0.32);
  --ft-bg-1-inv: #2d2b2b;
  --ft-bg-2-inv: #3a3737;
  --ft-bg-3-inv: #232121;
  --ft-border-inv: rgba(247, 247, 247, 0.10);
  --ft-border-strong-inv: rgba(247, 247, 247, 0.22);

  /* -------- Color: Accent / focus -------- */
  --ft-accent: var(--ft-deep-orange);
  --ft-focus-ring: var(--ft-gold);

  /* -------- Type: Families --------- */
  --ft-font-sans: 'Outfit', 'Noto Sans Thai', system-ui, -apple-system, Segoe UI, sans-serif;
  --ft-font-thai: 'Noto Sans Thai', 'Outfit', system-ui, sans-serif;
  --ft-font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, monospace;

  /* -------- Type: Weights (the contrast IS the brand) --------- */
  --ft-w-thin:    100;  /* English body */
  --ft-w-light:   300;  /* Thai body */
  --ft-w-regular: 400;
  --ft-w-medium:  500;  /* All headlines */

  /* -------- Type: Scale --------- */
  --ft-size-display:  88px;   /* hero */
  --ft-size-h1:       64px;
  --ft-size-h2:       44px;
  --ft-size-h3:       32px;
  --ft-size-h4:       24px;
  --ft-size-h5:       20px;
  --ft-size-body-lg:  18px;
  --ft-size-body:     16px;
  --ft-size-body-sm:  14px;
  --ft-size-caption:  12px;

  /* -------- Type: Line height --------- */
  --ft-lh-tight:  1.05;
  --ft-lh-snug:   1.15;
  --ft-lh-normal: 1.4;
  --ft-lh-body:   1.6;

  /* -------- Type: Tracking --------- */
  --ft-tracking-tight: -0.02em;
  --ft-tracking-snug:  -0.01em;
  --ft-tracking-normal: 0em;
  --ft-tracking-wide:   0.04em;

  /* -------- Spacing (8pt grid) --------- */
  --ft-s-0:   0;
  --ft-s-1:   4px;
  --ft-s-2:   8px;
  --ft-s-3:   12px;
  --ft-s-4:   16px;
  --ft-s-5:   24px;
  --ft-s-6:   32px;
  --ft-s-7:   48px;
  --ft-s-8:   64px;
  --ft-s-9:   96px;
  --ft-s-10:  128px;

  /* -------- Radii --------- */
  --ft-r-sm:    8px;
  --ft-r-md:    12px;
  --ft-r-lg:    16px;
  --ft-r-xl:    20px;
  --ft-r-2xl:   24px;
  --ft-r-pill:  999px;

  /* -------- Shadows (warm-tinted) --------- */
  --ft-shadow-sm: 0 1px 2px rgba(45, 43, 43, 0.06);
  --ft-shadow-md: 0 8px 24px rgba(45, 43, 43, 0.08);
  --ft-shadow-lg: 0 24px 64px rgba(45, 43, 43, 0.12);
  --ft-shadow-glow: 0 16px 48px rgba(255, 88, 45, 0.25);

  /* -------- Motion --------- */
  --ft-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ft-dur-micro: 180ms;
  --ft-dur-comp:  320ms;
  --ft-dur-hero:  520ms;
}

/* ============================================================
   Base type
   ============================================================ */
html, body {
  font-family: var(--ft-font-sans);
  font-weight: var(--ft-w-thin);
  font-size: var(--ft-size-body);
  line-height: var(--ft-lh-body);
  color: var(--ft-fg-1);
  background: var(--ft-bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic typography classes — use these on elements directly */
.ft-display,
.ft-h1, .ft-h2, .ft-h3, .ft-h4, .ft-h5 {
  font-family: var(--ft-font-sans);
  font-weight: var(--ft-w-medium);
  color: var(--ft-fg-1);
  text-wrap: balance;
  margin: 0;
}

.ft-display {
  font-size: var(--ft-size-display);
  line-height: var(--ft-lh-tight);
  letter-spacing: var(--ft-tracking-tight);
}
.ft-h1 {
  font-size: var(--ft-size-h1);
  line-height: var(--ft-lh-tight);
  letter-spacing: var(--ft-tracking-tight);
}
.ft-h2 {
  font-size: var(--ft-size-h2);
  line-height: var(--ft-lh-snug);
  letter-spacing: var(--ft-tracking-tight);
}
.ft-h3 {
  font-size: var(--ft-size-h3);
  line-height: var(--ft-lh-snug);
  letter-spacing: var(--ft-tracking-snug);
}
.ft-h4 {
  font-size: var(--ft-size-h4);
  line-height: var(--ft-lh-snug);
}
.ft-h5 {
  font-size: var(--ft-size-h5);
  line-height: var(--ft-lh-normal);
}

.ft-body-lg {
  font-size: var(--ft-size-body-lg);
  font-weight: var(--ft-w-thin);
  line-height: var(--ft-lh-body);
  text-wrap: pretty;
}
.ft-body {
  font-size: var(--ft-size-body);
  font-weight: var(--ft-w-thin);
  line-height: var(--ft-lh-body);
  text-wrap: pretty;
}
.ft-body-sm {
  font-size: var(--ft-size-body-sm);
  font-weight: var(--ft-w-thin);
  line-height: var(--ft-lh-normal);
}
.ft-caption {
  font-size: var(--ft-size-caption);
  font-weight: var(--ft-w-regular);
  line-height: var(--ft-lh-normal);
  letter-spacing: var(--ft-tracking-wide);
  text-transform: uppercase;
  color: var(--ft-fg-3);
}

/* Thai variants — match optical size to English, but loosen vertical + tracking.
   Thai characters carry vowels/tone marks above and below the consonant line;
   they need more line-height and zero/positive tracking to avoid overlap. */
.ft-thai {
  font-family: var(--ft-font-thai);
  letter-spacing: 0;                 /* override negative English tracking */
  line-height: var(--ft-lh-body);    /* extra vertical room by default */
}
.ft-thai.ft-display { line-height: 1.35; letter-spacing: 0; }
.ft-thai.ft-h1      { line-height: 1.35; letter-spacing: 0; }
.ft-thai.ft-h2      { line-height: 1.4;  letter-spacing: 0; }
.ft-thai.ft-h3,
.ft-thai.ft-h4,
.ft-thai.ft-h5      { line-height: 1.5;  letter-spacing: 0; }
.ft-thai.ft-body,
.ft-thai.ft-body-lg,
.ft-thai.ft-body-sm {
  font-weight: var(--ft-w-light);
  line-height: 1.75;                 /* Thai body wants ~1.7-1.8 */
  letter-spacing: 0;
}

/* Auto-loosen any element with lang="th" — safety net so Thai always
   gets breathing room even if .ft-thai isn't applied. */
:where([lang="th"]) {
  line-height: 1.7;
  letter-spacing: 0;
  word-break: keep-all;              /* Thai has no spaces; don't break mid-word */
}

/* Gradient text utility — use sparingly (1 per screen) */
.ft-gradient-text {
  background: var(--ft-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Surfaces
   ============================================================ */
.ft-surface-light  { background: var(--ft-bg-1); color: var(--ft-fg-1); }
.ft-surface-card   { background: var(--ft-bg-2); color: var(--ft-fg-1); }
.ft-surface-dark   { background: var(--ft-bg-1-inv); color: var(--ft-fg-1-inv); }
.ft-surface-grad   { background: var(--ft-gradient); color: var(--ft-pure-white); }

/* ============================================================
   Focus
   ============================================================ */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ft-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}