/* ============================================================
   BETOYA FOODS DESIGN SYSTEM — Foundations
   Colors + Typography + Spacing tokens (CSS custom properties)
   Brand: forest-green #1D6D40 · gold #EFBD37 · warm-orange #E49536
   Logo accent: red-orange #D95F37
   Target: Vietnamese authentic cuisine × Japanese market
   Typeface: Noto Sans JP (Google Fonts) + Be Vietnam Pro (Google Fonts)
   Source: betoyafoods.com — SVG logo color extraction
   ============================================================ */

/* ---------- Google Fonts — Noto Sans JP + Be Vietnam Pro ----------
   Loaded by layouts/Base.astro's <link> (with preconnect), NOT by an
   @import here — a duplicate @import used to also fetch this same
   pair (plus unused italic weights) as a second render-blocking
   request, ~120KB and a measured ~1.2s render-blocking cost, on every
   single page. Fixed 2026-08-22 while chasing homepage LCP (Issue #2);
   sitewide effect, not homepage-only. Do not re-add an @import here
   without removing/reconciling Base.astro's <link>. ---------- */

:root {
  /* ============================================================
     COLOR — BRAND
     Source: betoyafoods.com logo SVG — 5 fill classes (.a–.e)
     .a #fff · .b #1d6d40 · .c #efbd37 · .d #e49536 · .e #d95f37
     ============================================================ */
  --brand-green:       #1D6D40;  /* primary — logo body, nav accents */
  --brand-gold:        #EFBD37;  /* accent — logo highlight, CTAs */
  --brand-orange:      #E49536;  /* warm accent — food warmth, hover */
  --brand-red-orange:  #D95F37;  /* hot accent — spicy, PHO EXPRESS */
  --brand-white:       #FFFFFF;  /* logo circle background */

  /* Forest Green ramp (base = #1D6D40) */
  --green-50:   #EEF7F2;
  --green-100:  #C9E8D4;
  --green-200:  #94D1AA;
  --green-300:  #5AB87E;
  --green-400:  #2D9457;
  --green-500:  #1D6D40;  /* base — brand primary */
  --green-600:  #175836;
  --green-700:  #12452B;
  --green-800:  #0C3220;
  --green-900:  #071F13;
  --green-950:  #030F09;

  /* Gold ramp (base = #EFBD37) */
  --gold-50:    #FEF9E7;
  --gold-100:   #FCEDC1;
  --gold-200:   #F9D983;
  --gold-300:   #F5C645;
  --gold-400:   #F2C033;  /* slightly lighter than base */
  --gold-500:   #EFBD37;  /* base — brand gold accent */
  --gold-600:   #D4A11F;
  --gold-700:   #A87C10;
  --gold-800:   #7C5A08;
  --gold-900:   #4F3A04;
  --gold-950:   #2A1E02;

  /* Warm Orange (logo .d — #E49536, secondary accent) */
  --orange-50:   #FEF5E7;
  --orange-100:  #FBE0B8;
  --orange-200:  #F7C07A;
  --orange-300:  #F3A03D;
  --orange-400:  #EF8F1B;
  --orange-500:  #E49536;  /* base — warm food accent */
  --orange-600:  #C87820;
  --orange-700:  #9E5C15;
  --orange-800:  #74420C;
  --orange-900:  #4A2905;

  /* Red-Orange (logo .e — #D95F37, spicy / PHO EXPRESS) */
  --red-50:   #FEF0EB;
  --red-100:  #FBCFBC;
  --red-200:  #F7A07D;
  --red-300:  #F0703E;
  --red-400:  #E46030;
  --red-500:  #D95F37;  /* base — PHO EXPRESS / hot items */
  --red-600:  #BF4722;
  --red-700:  #963516;
  --red-800:  #6E230C;
  --red-900:  #461404;

  /* ============================================================
     COLOR — NEUTRAL (warm cream — rice paper / bamboo feel)
     ============================================================ */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FDFCF8;  /* warm white — page background option */
  --neutral-50:  #FAF8F3;  /* page background */
  --neutral-100: #F2EDDF;
  --neutral-200: #E4DBCA;
  --neutral-300: #CCBFA9;
  --neutral-400: #AA9882;
  --neutral-500: #7E6E59;
  --neutral-600: #5C4F3E;
  --neutral-700: #3F352A;
  --neutral-800: #271E16;
  --neutral-900: #160F08;
  --neutral-950: #0A0704;

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --success:        #1D6D40;  /* reuse brand green */
  --success-bg:     #EEF7F2;
  --success-border: #94D1AA;
  --warning:        #C87820;  /* orange-600 */
  --warning-bg:     #FEF5E7;
  --warning-border: #F7C07A;
  --error:          #BF4722;  /* red-600 */
  --error-bg:       #FEF0EB;
  --error-border:   #F7A07D;
  --info:           #175836;  /* green-600 */
  --info-bg:        #C9E8D4;
  --info-border:    #5AB87E;

  /* ============================================================
     COLOR — TEXT
     ============================================================ */
  --text-primary:   #1A130A;  /* near-black with warm cast */
  --text-secondary: #5C4F3E;
  --text-tertiary:  #8C7E6A;
  --text-disabled:  #BEB0A0;
  --text-inverse:   #FFFFFF;
  --text-brand:     #175836;  /* green-600 — readable on light */
  --text-gold:      #A87C10;  /* gold-700 — readable on light */
  --text-link:      #175836;
  --text-error:     #963516;  /* red-700 */
  --text-success:   #175836;

  /* ============================================================
     COLOR — SURFACE / BORDER
     ============================================================ */
  --surface-page:     #FAF8F3;
  --surface-card:     #FFFFFF;
  --surface-sunken:   #F2EDDF;
  --surface-dark:     #1A130A;
  --surface-green:    #1D6D40;
  --surface-gold:     #EFBD37;
  --surface-overlay:  rgba(26, 19, 10, 0.55);
  --border-subtle:    #F2EDDF;
  --border-default:   #E4DBCA;
  --border-strong:    #CCBFA9;
  --border-focus:     #1D6D40;
  --border-brand:     #EFBD37;

  /* ============================================================
     CONTRACT — tên semantic dùng chung cho showcase.css (ds-index)
     Map raw ramp → tên chuẩn. Xem design-thinking/design-system/TOKENS_CONTRACT.md
     ============================================================ */
  --brand-primary:        var(--brand-green);   /* nút primary, tiêu đề, active */
  --brand-accent:         var(--brand-gold);    /* nhấn phụ */
  --surface-brand-subtle: rgba(29, 109, 64, 0.08);  /* nền phủ green nhạt (link active, tag) */
  --font-sans:            var(--font-vn);       /* Latin chính = Be Vietnam Pro */

  /* ============================================================
     TYPOGRAPHY — family tokens
     Noto Sans JP — covers Japanese (wght 300–700)
     Be Vietnam Pro — covers Vietnamese + Latin (wght 300–800)
     ============================================================ */
  --font-primary: "Noto Sans JP", "Be Vietnam Pro", system-ui, sans-serif;
  --font-jp:      "Noto Sans JP", system-ui, sans-serif;
  --font-vn:      "Be Vietnam Pro", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Be Vietnam Pro", "Noto Sans JP", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* Type scale (1.25 major-third) */
  --fs-display:  52px;
  --fs-h1:       40px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-title:    18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-label:    12px;   /* Material Label Small — min for functional text */
  --fs-overline: 11px;   /* Apple Caption 2 — absolute minimum, use sparingly */

  /* JP-optimized (slightly larger for readability) */
  --fs-body-jp:    17px;
  --fs-body-sm-jp: 15px;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;  /* recommended for JP body text */
  --lh-loose:   1.9;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-overline: 0.14em;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ============================================================
     SPACING SCALE (4px base)
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  /* ============================================================
     SHADOW / ELEVATION
     ============================================================ */
  --shadow-xs:    0 1px 2px rgba(26, 19, 10, 0.06);
  --shadow-sm:    0 1px 4px rgba(26, 19, 10, 0.08), 0 1px 2px rgba(26, 19, 10, 0.05);
  --shadow-md:    0 4px 12px rgba(26, 19, 10, 0.08), 0 2px 4px rgba(26, 19, 10, 0.05);
  --shadow-lg:    0 12px 28px rgba(26, 19, 10, 0.10), 0 4px 8px rgba(26, 19, 10, 0.06);
  --shadow-xl:    0 24px 48px rgba(26, 19, 10, 0.14), 0 8px 16px rgba(26, 19, 10, 0.07);
  --shadow-green: 0 8px 24px rgba(29, 109, 64, 0.30);
  --shadow-gold:  0 8px 24px rgba(239, 189, 55, 0.40);
  --shadow-focus: 0 0 0 3px rgba(29, 109, 64, 0.28);

  /* ============================================================
     TRANSITION
     ============================================================ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 450ms;

  /* ============================================================
     MOTION — entrance/reveal set (added 2026-08-22, Issue #2 homepage
     redesign spec §0). Cấm ease/ease-in/linear cho entrance — ngoại lệ
     linear chỉ hợp lệ với scroll-driven timeline view() (scrub theo vị
     trí cuộn, không phải thời gian).
     ============================================================ */
  --motion-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --motion-dur-feedback: 120ms;  /* = --duration-fast */
  --motion-dur-ui:       200ms;  /* = --duration-base */
  --motion-dur-reveal:   700ms;
  --motion-dur-hero:     1000ms;

  /* Added for Issue #18 (site-chrome-17-spec.md §6) — accordion + drawer motion. */
  --motion-ease-in-out:  cubic-bezier(.77, 0, .175, 1);  /* accordion (grid-template-rows) */
  --motion-ease-drawer:  cubic-bezier(.32, .72, 0, 1);   /* mobile drawer slide-in */
  --motion-dur-panel:    350ms;                          /* mobile drawer slide-in */

  /* ============================================================
     LAYOUT — fluid outer margin (Issue #2 homepage redesign)
     ============================================================ */
  --grid-margin: clamp(1.5rem, 5vw, 6rem);

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;
}

/* ============================================================
   DARK MODE — override semantic tokens (2026-07)
   Light-first: :root = light; [data-theme="dark"] đảo semantic.
   Nền tối "forest charcoal" ám green brand. Raw ramps không đổi.
   ============================================================ */
[data-theme="dark"] {
  /* Semantic states */
  --success-bg:     #0F2519;
  --success-border: #1F5C3C;
  --warning-bg:     #2A1F0C;
  --warning-border: #6E5013;
  --error-bg:       #2C1710;
  --error-border:   #6E3320;
  --info-bg:        #0F2519;
  --info-border:    #2A7A4E;

  /* Text */
  --text-primary:   #F2F4F0;
  --text-secondary: #C3C9BF;
  --text-tertiary:  #949B90;
  --text-disabled:  #4E5549;
  --text-inverse:   #1A130A;
  --text-brand:     #6FBE8E;  /* green-300 — đọc được trên nền tối */
  --text-gold:      #F2CB60;  /* gold sáng */
  --text-link:      #6FBE8E;
  --text-error:     #F09A78;
  --text-success:   #6FBE8E;

  /* Surface / border — green-tinted dark */
  --surface-page:    #0E1511;
  --surface-card:    #17211B;
  --surface-sunken:  #0A100C;
  --surface-brand-subtle: rgba(111, 190, 142, 0.16);  /* green nhạt trên nền tối */
  --surface-dark:    #1A130A;
  --surface-green:   #1D6D40;
  --surface-gold:    #EFBD37;
  --surface-overlay: rgba(4, 8, 6, 0.65);
  --border-subtle:   #202B24;
  --border-default:  #2C3A31;
  --border-strong:   #3E4F43;
  --border-focus:    #6FBE8E;
  --border-brand:    #EFBD37;

  /* Shadow — đen sâu */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl:    0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.45);
  --shadow-green: 0 8px 24px rgba(29, 109, 64, 0.35);
  --shadow-gold:  0 8px 24px rgba(239, 189, 55, 0.25);
  --shadow-focus: 0 0 0 3px rgba(111, 190, 142, 0.30);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.ds-h3 {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.ds-h4 {
  font-family: var(--font-jp);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.ds-title {
  font-family: var(--font-jp);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.ds-body-jp {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-jp);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.ds-body-vn {
  font-family: var(--font-vn);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.ds-body-lg {
  font-family: var(--font-vn);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.ds-body {
  font-family: var(--font-vn);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.ds-body-sm {
  font-family: var(--font-vn);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.ds-caption {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-tertiary);
}
.ds-overline {
  font-family: var(--font-vn);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-gold);
}

* { font-feature-settings: "kern" 1, "palt" 1; }