/* =========================================================================
   Refinery Asset — design tokens (Source of Truth)
   Option B · Verified Advisory — selected 2026-10-15
   Reference board: docs/design-system/index.html#b

   Layers:
     1. Primitives  — raw brand values (never use directly in components)
     2. Semantic    — what a value is for (use these in components)
     3. Component   — sizes for buttons, inputs, badges, cards
   Change a value here, never in main.css.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. PRIMITIVES — colour
     Brand colours come from Assets/Refinery Asset brand identity board.png
     --------------------------------------------------------------------- */
  /* Primary */
  --color-olive-700: #26372B;   /* Deep Olive (brand) */
  --color-olive-600: #34503C;
  --color-olive-50:  #E3EAE2;
  /* Secondary */
  --color-brass-500: #A58B61;   /* Muted Brass (brand) — decorative / large text only on light */
  --color-brass-700: #7E6540;   /* Brass Ink — highlighted words, eyebrows */
  --color-brass-50:  #F3EDE2;
  /* Neutral */
  --color-white:     #FFFFFF;
  --color-paper-100: #F5F4F0;
  --color-paper-200: #ECEAE3;
  --color-line-200:  #E2DFD7;
  --color-line-300:  #CBC7BD;
  --color-line-400:  #AFAA9F;
  --color-slate-600: #58615A;
  --color-ink-900:   #1D2520;
  /* Brand colours kept for brand surfaces (footer, logo grounds) */
  --color-ivory-50:     #F7F3EA;   /* Soft Ivory */
  --color-beige-200:    #E9E0D2;   /* Porcelain Beige */
  --color-espresso-900: #302B27;   /* Roasted Espresso */
  --color-sage-200:     #CFDAD0;   /* map water */
  /* Status */
  --color-ok-700:    #2A6448;
  --color-ok-50:     #E1EFE6;
  --color-warn-700:  #7F5210;
  --color-warn-50:   #F6ECDA;
  --color-error-600: #A33A2E;
  --color-focus:     #2F6B4F;

  /* ---------------------------------------------------------------------
     2. SEMANTIC — colour
     Contrast (WCAG 2.2): text-* on bg / surface all pass AA (4.5:1).
     --------------------------------------------------------------------- */
  --bg:               var(--color-paper-100);
  --surface:          var(--color-white);
  --surface-2:        var(--color-paper-200);
  --surface-brand:    var(--color-olive-700);
  --text:             var(--color-ink-900);
  --text-muted:       var(--color-slate-600);
  --text-on-brand:    var(--color-ivory-50);
  --text-highlight:   var(--color-brass-700);
  --border:           var(--color-line-200);
  --border-input:     var(--color-line-300);
  --border-strong:    var(--color-line-400);
  --primary:          var(--color-olive-700);
  --primary-hover:    var(--color-olive-600);
  --on-primary:       var(--color-white);
  --tonal:            var(--color-olive-50);
  --tonal-hover:      #D3DED1;
  --on-tonal:         var(--color-olive-700);
  --link:             var(--color-olive-700);
  --link-underline:   var(--color-brass-500);
  --decor:            var(--color-brass-500);
  --focus:            var(--color-focus);
  --focus-ring:       rgba(47, 107, 79, .22);
  --disabled-bg:      #E6E4DE;
  --disabled-fg:      #9C9990;
  --error:            var(--color-error-600);
  --badge-ok-fg:      var(--color-ok-700);
  --badge-ok-bg:      var(--color-ok-50);
  --badge-warn-fg:    var(--color-warn-700);
  --badge-warn-bg:    var(--color-warn-50);
  --scrim-hero:       linear-gradient(180deg, rgba(20, 26, 22, .10), rgba(20, 26, 22, .62));
  --scrim-dialog:     rgba(29, 37, 32, .55);
  /* on photography (hero) */
  --text-on-media:        var(--color-white);
  --text-on-media-muted:  rgba(255, 255, 255, .88);
  --text-on-media-accent: var(--color-beige-200);
  --underline-on-media:   rgba(255, 255, 255, .5);
  --surface-on-media:     rgba(255, 255, 255, .92);   /* badges over images */
  --surface-illus-tag:    rgba(20, 26, 22, .72);      /* "ภาพประกอบ" label over stock photos */
  /* on brand surfaces (olive band, featured tier, footer) */
  --text-on-brand-muted:  rgba(247, 243, 234, .8);
  --accent-on-brand:      var(--color-brass-500);
  --tint-on-brand:        rgba(247, 243, 234, .16);   /* hairlines, tick discs */
  --border-on-primary:    rgba(247, 243, 234, .4);
  --badge-feature-bg:     var(--color-brass-500);
  --badge-feature-fg:     var(--color-white);
  --rating-star:          var(--color-brass-500);
  /* illustrative map */
  --map-land:   var(--color-beige-200);
  --map-road:   var(--color-ivory-50);
  --map-water:  var(--color-sage-200);
  --map-pin:    var(--color-olive-700);
  --map-pin-2:  var(--color-brass-500);
  --map-label:  var(--color-ink-900);
  --qr-fg:      var(--color-ink-900);
  --qr-bg:      var(--color-white);

  /* ---------------------------------------------------------------------
     TYPE
     Latin faces have no Thai glyphs, so Thai text falls through to Anuphan.
     Sizes are fluid: clamp(mobile, vw, desktop).
     --------------------------------------------------------------------- */
  --font-display: "Manrope", "Anuphan", system-ui, sans-serif;
  --font-body:    "Anuphan", "Manrope", system-ui, sans-serif;
  --font-data:    "Manrope", "Anuphan", system-ui, sans-serif;   /* use with tabular-nums */

  --text-display: clamp(42px, 5.63vw, 72px);
  --text-h1:      clamp(34px, 4.06vw, 52px);
  --text-h2:      clamp(28px, 2.97vw, 38px);
  --text-h3:      clamp(22px, 2.19vw, 28px);
  --text-h4:      clamp(19px, 1.64vw, 21px);
  --text-h5:      clamp(16px, 1.33vw, 17px);
  --text-h6:      13px;   /* eyebrow */
  --text-lead:    clamp(17px, 1.48vw, 19px);
  --text-body:    16px;
  --text-small:   14px;
  --text-caption: 12px;
  --text-data:    clamp(28px, 2.66vw, 34px);
  --text-data-sm: 15px;   /* card metrics */
  --text-data-md: 20px;   /* card price, step numbers */
  --text-score:   44px;   /* review score */
  --text-wordmark: 18px;  /* developer names in the trust strip */
  --text-icon-lg: 24px;
  --leading-tight: 1.1;

  /* line-height: English / Thai (Thai needs room for tone marks) */
  --leading-display: 1.02;  --leading-display-th: 1.25;
  --leading-h1: 1.06;       --leading-h1-th: 1.3;
  --leading-h2: 1.1;        --leading-h2-th: 1.35;
  --leading-h3: 1.2;        --leading-h3-th: 1.4;
  --leading-h4: 1.3;        --leading-h4-th: 1.5;
  --leading-h5: 1.4;        --leading-h5-th: 1.6;
  --leading-h6: 1.4;        --leading-h6-th: 1.6;
  --leading-lead: 1.6;      --leading-lead-th: 1.75;
  --leading-body: 1.6;      --leading-body-th: 1.75;
  --leading-small: 1.55;    --leading-small-th: 1.7;
  --leading-caption: 1.5;   --leading-caption-th: 1.6;

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

  /* tracking applies to English only — reset under :lang(th) below */
  --tracking-display: -0.03em;
  --tracking-h1: -0.025em;
  --tracking-h2: -0.02em;
  --tracking-h3: -0.01em;
  --tracking-eyebrow: .08em;

  --measure: 68ch;   /* max line length for running text */

  /* ---------------------------------------------------------------------
     SPACE — 4px base
     --------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;

  /* ---------------------------------------------------------------------
     LAYOUT
     12 columns · 24px gutter · 1280px max  →  4 columns · 16px gutter < 720px
     --------------------------------------------------------------------- */
  --container: 1280px;
  --content: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --page-margin: 24px;
  --grid-columns: 12;
  --hero-inset: 16px;
  --section-y: 80px;
  --card-pad: 24px;
  --header-h: 72px;

  /* ---------------------------------------------------------------------
     RADIUS · BORDER · SHADOW · EFFECT
     --------------------------------------------------------------------- */
  --r-sm: 10px;     /* icon buttons, thumbnails */
  --r-in: 12px;     /* inputs */
  --r-md: 16px;     /* cards, glass panel */
  --r-lg: 24px;     /* hero frame, CTA band */
  --r-pill: 999px;  /* buttons, badges, nav pill */

  --border-1: 1px solid var(--border);
  --border-1-strong: 1px solid var(--border-strong);
  --border-glass: 1px solid rgba(255, 255, 255, .35);

  --shadow-1: 0 1px 2px rgba(29, 37, 32, .06), 0 1px 1px rgba(29, 37, 32, .04);
  --shadow-2: 0 10px 30px -12px rgba(29, 37, 32, .22);
  --blur-glass: blur(14px);
  --glass-bg: rgba(255, 255, 255, .18);

  /* ---------------------------------------------------------------------
     3. COMPONENT
     --------------------------------------------------------------------- */
  --btn-h: 48px;
  --btn-h-sm: 36px;
  --btn-px: 22px;
  --btn-px-sm: 14px;
  --btn-fs: 15px;
  --btn-fs-sm: 13px;
  --btn-weight: 600;
  --btn-radius: var(--r-pill);
  --btn-icon: 44px;          /* minimum tap target */
  --input-h: 48px;
  --input-radius: var(--r-in);
  --badge-radius: var(--r-pill);
  --badge-fs: 12px;
  --card-radius: var(--r-md);
  --focus-outline: 2px solid var(--focus);
  --focus-offset: 3px;
  --input-px: 14px;
  --badge-px: 10px;
  --chip-h: 40px;
  --dot: 6px;
  --icon: 18px;
  --icon-tick: 16px;
  --icon-faq: 32px;
  --icon-disc: 44px;         /* info-list icons, avatars */
  --logo-h: 36px;
  --logo-h-sm: 30px;
  --logo-h-footer: 40px;
  --hero-min-h: min(86vh, 760px);
  --hero-pad-top: 140px;
  --hero-copy-max: 36em;
  --search-max-w: 820px;
  --search-pad: 6px;
  --search-field-px: 20px;
  --glass-max-w: 300px;
  --glass-thumb-w: 84px;
  --glass-thumb-h: 64px;
  --dev-logo-h: 56px;
  --dev-logo-min-w: 150px;
  --step-num: 56px;
  --step-indent: 76px;       /* step number + gap on the vertical timeline */
  --map-min-h: 420px;
  --map-min-h-sm: 340px;
  --qr-size: 148px;
  --dialog-w: 480px;
  --fab-offset: 20px;
  --fab-clearance: 130px;    /* footer bottom padding so the FAB never hides links */
  --hero-h1-max: 15em;
  --trust-label-max: 16em;
  --tick-offset: 3px;        /* aligns ticks / checkboxes with the first text line */
  --opacity-soft: .82;       /* footer links on olive */
  --opacity-faint: .7;       /* footer legal line */
  /* illustrative map (SVG user units, scale with the viewBox) */
  --map-label-size: 15px;
  --map-stroke-road: 6;
  --map-stroke-main: 14;
  --map-stroke-water: 22;
  --map-halo-w: 8;
  --map-halo-opacity: .25;

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --dur-fast: 180ms;
  --dur-base: 250ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 719px) {
  :root {
    --gutter: 16px;
    --page-margin: 16px;
    --grid-columns: 4;
    --section-y: 56px;
    --card-pad: 20px;
    --header-h: 64px;
    --hero-pad-top: 200px;
    --fab-offset: 12px;
    --logo-h: var(--logo-h-sm);
  }
}

/* Thai: no tracking, no uppercase, taller line-heights. */
:lang(th) {
  --tracking-display: 0;
  --tracking-h1: 0;
  --tracking-h2: 0;
  --tracking-h3: 0;
  --tracking-eyebrow: 0;
  --leading-display: var(--leading-display-th);
  --leading-h1: var(--leading-h1-th);
  --leading-h2: var(--leading-h2-th);
  --leading-h3: var(--leading-h3-th);
  --leading-h4: var(--leading-h4-th);
  --leading-h5: var(--leading-h5-th);
  --leading-h6: var(--leading-h6-th);
  --leading-lead: var(--leading-lead-th);
  --leading-body: var(--leading-body-th);
  --leading-small: var(--leading-small-th);
  --leading-caption: var(--leading-caption-th);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}