/* ==========================================================================
   YAK EXPRESS — Design tokens (Master Visual System v2.0 "Yellow Liquid Motion")
   Copied verbatim from the design-system token files. Do not retune by taste.
   Fonts: Google Sans (self-hosted woff2) + Noto Sans Thai + Material Symbols
   Rounded (both loaded from Google Fonts by inc/enqueue.php).
   ========================================================================== */

/* ---- Brand face: self-hosted variable Google Sans ---- */
@font-face{font-family:"Google Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/GoogleSans-VariableFont_GRAD_opsz_wght.woff2") format("woff2-variations"),url("../fonts/GoogleSans-VariableFont_GRAD_opsz_wght.woff2") format("woff2")}
@font-face{font-family:"Google Sans";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.woff2") format("woff2-variations"),url("../fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.woff2") format("woff2")}

/* ---- tokens/colors.css ---- */
/* YAK EXPRESS v2.0 — Direction B2 "Yellow Liquid Motion".
   Colour is verbatim from Master Visual System v2.0. The v1 values #F6C94A and #FFB800
   are DELETED and must never reappear. Screen balance: white + warm neutrals 65-70%,
   yellow family 18-22%, soft navy 8-12%, blue 5-8% max (functional only). */
:root{
  /* ---- Brand yellow: one family, three roles ---- */
  --brand-yellow:#F7CD0F;            /* primary CTA, active state, key highlight. Same hex as the logo artwork. */
  --brand-yellow-highlight:#FFF1A8;  /* gradient light stop ONLY — never body text, never a fill on its own */
  --brand-yellow-depth:#F2B23E;      /* gradient depth stop and warm edge */
  --brand-logo-yellow:#F7CD0F;       /* logo artwork — never recolour */

  /* ---- Ink. Pure black is banned. ---- */
  --ink-primary:#1F2A34;             /* all text, nav, icons */
  --ink-secondary:#526173;           /* labels and descriptions */
  --ink-disabled:#9AA5AE;
  --ink-inverse:#FFFFFF;

  /* ---- Surfaces ---- */
  --surface-white:#FFFFFF;           /* page background and cards */
  --surface-cloud:#F7F9FA;           /* section background */
  --surface-mist:#EEF2F4;            /* muted panels, divider zones, map base */
  --surface-cream:#FFFDF7;           /* Standard card gradient end */
  --surface-warm-white:#FFF9E8;      /* Emphasis card gradient end */
  --surface-butter:#FFF8E6;          /* Secondary button gradient end */

  /* ---- Functional blue / support. Blue is status, In Transit, route and map only. ---- */
  --info-soft-blue:#A8D8F0;          /* map tint, info tint, chart comparison series */
  --support-blue:#4F8FCB;            /* In Transit surfaces, route data, focus ring, secondary chart series */
  --support-sky:#8AD8F0;             /* gradient.info end stop */
  --support-teal:#5BC7B2;            /* positive movement, completed chart series */
  --support-amber:#F2A44A;           /* urgency, due soon */
  --card-edge-light:#4F8FCB;         /* wallet-hero card edge light */
  --card-navy-2:#344553;             /* wallet-hero card gradient end */

  /* ---- Borders ---- */
  --border-default:#DCE5EA;
  --border-secondary-btn:#E8DCA9;
  --border-grid:#E6EBEF;

  /* ---- Status. Colour alone never communicates state: icon + label are mandatory. ---- */
  --status-success:#2FBF95;          /* completed, available, paid */
  --status-in-transit:#369EF4;       /* moving, current process */
  --status-pending:#F7CD0F;          /* waiting, attention soon */
  --status-warning:#F2A44A;          /* time-sensitive but recoverable */
  --status-error:#D94C4C;            /* failed, blocked, overdue */

  /* Chip fills — status colour at ~14% */
  --chip-success:rgba(47,191,149,.14);
  --chip-in-transit:rgba(54,158,244,.14);
  --chip-pending:rgba(247,205,15,.20);
  --chip-warning:rgba(242,164,74,.14);
  --chip-error:rgba(217,76,76,.14);
  --chip-info:rgba(168,216,240,.28);

  /* ---- Semantic aliases ---- */
  --text-body:var(--ink-primary);
  --text-label:var(--ink-secondary);
  --text-disabled:var(--ink-disabled);
  --text-on-yellow:var(--ink-primary);   /* never white on yellow */
  --surface-page:var(--surface-white);
  --surface-card:var(--surface-white);
  --surface-section:var(--surface-cloud);
  --surface-panel:var(--surface-mist);
  --icon-default:var(--ink-primary);
  --icon-muted:var(--ink-secondary);
  --icon-active:var(--brand-yellow);
  --focus-ring:var(--support-blue);
  --link:var(--support-blue);
  --link-hover:#3C74A8;
  --overlay-scrim:rgba(31,42,52,.32);
  --ghost-hover:rgba(247,205,15,.10);
  --ghost-press:rgba(247,205,15,.18);
  --row-hover:var(--surface-cloud);

  /* ---- Chart series. Max four prominent series; every series needs a non-colour cue. ---- */
  --chart-series-1:#F7CD0F;          /* primary */
  --chart-series-2:#A8D8F0;          /* comparison / previous period */
  --chart-series-3:#5BC7B2;          /* positive / completed */
  --chart-series-4:#369EF4;          /* secondary — matches status.inTransit so one blue means one thing */
  --chart-attention:#F2A44A;
  --chart-grid:#E6EBEF;
  --chart-axis:#526173;
}

/* ---- tokens/mascot.css ---- */
/* Mascot palette — verbatim from Yak_BrandGuidelines_MascotProductionColorStyles.
   ARTWORK COLOURS ONLY. Never use these as UI fills, text, or status colours;
   the UI palette lives in colors.css. They exist so panels, cards and
   illustrations placed behind the mascot can be tuned to it. */
:root{
  --mascot-ink:#2E5468;          /* outlines, brows, mouth interior */
  --mascot-skin:#E6EFF2;         /* face / body base */
  --mascot-skin-shade:#B8D5E6;   /* ears, hands, shading */
  --mascot-orange:#FE8D39;       /* crown plume, tongue, cheeks */
  --mascot-bronze:#BE762A;       /* costume trim, boots */
  --mascot-gold:#F5C133;         /* crown, sash, jacket */
  --mascot-brown:#543218;        /* trousers, deepest shadow */

  /* Backdrops that sit correctly behind the mascot */
  --mascot-bg-tint:#F4F8FA;      /* soft cool wash — pairs with --mascot-skin */
  --mascot-bg-yellow:var(--brand-yellow);
}

/* ---- tokens/typography.css ---- */
/* YAK EXPRESS typography. Google Sans is the brand face, self-hosted from the licensed
   variable fonts in fonts/. Noto Sans Thai carries Thai glyph coverage. */
:root{
  --font-core:"Google Sans","Google Sans Text","Noto Sans Thai","Inter",system-ui,sans-serif;
  --font-thai:"Google Sans","Noto Sans Thai","Inter",system-ui,sans-serif;
  --font-numeric:var(--font-core);
  --numeric-tabular:"tnum" 1,"lnum" 1;/* @kind other */

  --weight-regular:400;/* @kind other */
  --weight-medium:500;/* @kind other */
  --weight-semibold:600;/* @kind other */
  --weight-bold:700;/* @kind other */

  /* role: size / line-height / weight */
  --display-size:44px;      --display-lh:1.10;/* @kind other */  --display-weight:700;/* @kind other */
  --page-title-size:30px;   --page-title-lh:1.15;/* @kind other */ --page-title-weight:700;/* @kind other */
  --section-title-size:22px;--section-title-lh:1.25;/* @kind other */ --section-title-weight:700;/* @kind other */
  --card-title-size:17px;   --card-title-lh:1.30;/* @kind other */ --card-title-weight:600;/* @kind other */
  --body-size:15px;         --body-lh:1.50;/* @kind other */     --body-weight:400;/* @kind other */
  --body-sm-size:14px;      --body-sm-lh:1.50;/* @kind other */
  --label-size:13px;        --label-lh:1.35;/* @kind other */    --label-weight:500;/* @kind other */
  --label-sm-size:12px;
  --data-size:32px;         --data-lh:1.10;/* @kind other */     --data-weight:700;/* @kind other */
  --data-sm-size:24px;

  --tracking-label:.02em;/* @kind other */   /* uppercase short labels only */
}

/* ---- tokens/spacing.css ---- */
/* YAK EXPRESS spacing + layout. Everything derives from a 4px base. */
:root{
  --space-1:4px;   /* base */
  --space-2:8px;   /* compact: icon + label, chips */
  --space-3:12px;  /* control: buttons, filters, form rows */
  --space-4:16px;
  --space-5:20px;  /* card padding, low */
  --space-6:24px;  /* card padding, high + grid gutter */
  --space-8:32px;  /* section gap, low + page margin */
  --space-10:40px;
  --space-12:48px; /* section gap, high */

  --card-padding:24px;
  --card-padding-compact:20px;
  --section-gap:32px;
  --section-gap-lg:48px;

  --grid-columns:12;/* @kind other */
  --grid-gutter:24px;
  --page-margin:32px;
  --content-max:1440px;

  --sidebar-width:256px;
  --sidebar-rail:72px;
  --topbar-height:64px;

  --control-height:44px;
  --control-height-lg:48px;
  --chip-height:30px;
  --row-height:54px;
  --icon-tile:44px;
}

/* ---- tokens/radius.css ---- */
/* YAK EXPRESS v2.0 radius language — by role, never decorative. */
:root{
  --radius-control:12px;     /* buttons, inputs, chips, nav pill */
  --radius-small-card:16px;  /* small cards, table containers, Standard + Status cards */
  --radius-card:18px;        /* KPI, chart, map, table (Emphasis) */
  --radius-hero:24px;        /* tracking hero, glass shells, modals — 24-28px */
  --radius-hero-lg:28px;
  --radius-pill:999px;       /* avatars, progress tracks */
}

/* ---- tokens/shadows.css ---- */
/* YAK EXPRESS v2.0 elevation. Every functional card maps to exactly one of S1, S2 or S3.
   Hierarchy comes from spacing, shadow and surface before borders. A border-only flat card
   is a violation; random elevation is a violation. */
:root{
  --shadow-s1:0 2px 8px rgba(31,42,52,.06);    /* inputs, quiet cards, table rows, Standard + Status cards */
  --shadow-s2:0 8px 24px rgba(31,42,52,.10);   /* KPI, chart, table, map, Emphasis cards */
  --shadow-s3:0 16px 40px rgba(31,42,52,.14);  /* tracking hero, glass shells, wallet panel, modals */
  --shadow-cta:0 8px 24px rgba(242,180,63,.36);/* primary gradient buttons — warm shadow, never a neon glow */
  --shadow-cta-pressed:0 3px 10px rgba(242,180,63,.28);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.72);
}

/* ---- tokens/effects.css ---- */
/* YAK EXPRESS v2.0 — Liquid Glass and the signature yellow glow line.
   These two systems carry Direction B2's identity. Both are capped, and the caps are hard rules. */
:root{
  /* ---- Liquid Glass ---- */
  --glass-fill:rgba(255,255,255,.88);          /* 0.86-0.90 range */
  --glass-blur:24px;/* @kind other */          /* 20-24px, only over simple light backgrounds */
  --glass-border:1px solid rgba(255,255,255,.68);/* @kind other */
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.72);
  --glass-shadow:var(--shadow-s3);/* @kind other */
  --glass-tint-map:rgba(168,216,240,.10);      /* 0.08-0.12 — tracking and map shells only */
  /* Coverage: 12% minimum for the direction to read as itself, 18% of screen area MAXIMUM.
     Allowed on exactly three things: one hero shell per screen, the top command strip, and one
     floating dock or status overlay. FORBIDDEN behind the wallet, any money value, any financial
     card, any transaction table and any chart — money and data sit on opaque bright surfaces. */

  /* ---- Signature yellow glow line ---- */
  --line-signature-width:2.5px;/* @kind other */                /* 2-2.5px */
  --line-signature-gradient:var(--gradient-route);/* @kind other */
  --line-signature-glow:0 0 18px rgba(247,205,15,.32);          /* brand yellow — v1's rgba(246,201,74) is deleted */
  --line-signature-inactive:var(--border-default);              /* the segment past the current node: no glow */
  --line-node-size:36px;                                        /* 32-40px timeline nodes */
  /* Allowed uses only: the tracking route and timeline, the connector on the active navigation
     item, destination and stop markers, and one hero curve per screen. One coherent line system
     per screen — it must read as a single continuous route, never several unrelated glowing strokes. */
}

/* ---- tokens/gradients.css ---- */
/* YAK EXPRESS v2.0 gradients — three stops, exact. Every button at every level uses its
   gradient token; a flat solid-fill button is a system violation. Cards take a gradient only
   when they are hero or emphasis surfaces — never tile several full-bleed gradients on one screen. */
:root{
  /* ---- Buttons ---- */
  --gradient-button-primary:linear-gradient(135deg,#FFE27A 0%,#F7CD0F 55%,#F2A83A 100%);/* @kind other */
  --gradient-button-hover:linear-gradient(135deg,#FFE06A 0%,#F7CD0F 55%,#EFA63A 100%);/* @kind other */
  --gradient-button-pressed:linear-gradient(135deg,#F7CD0F 0%,#E9B62F 55%,#DFA120 100%);/* @kind other */
  --gradient-button-secondary:linear-gradient(180deg,#FFFFFF 0%,#FFF8E6 100%);/* @kind other */
  --gradient-button-ghost-hover:linear-gradient(180deg,rgba(247,205,15,.10) 0%,rgba(247,205,15,.10) 100%);/* @kind other */
  --gradient-button-disabled:linear-gradient(180deg,#F5F6F7 0%,#ECEFF1 100%);/* @kind other */

  /* ---- Surfaces ---- */
  --gradient-surface-yellow:linear-gradient(135deg,#FFF1A8 0%,#F7CD0F 55%,#F2B23E 100%);/* @kind other */
  --gradient-surface-standard:linear-gradient(180deg,#FFFFFF 0%,#FFFDF7 100%);/* @kind other */
  --gradient-surface-emphasis:linear-gradient(180deg,#FFFFFF 0%,#FFF9E8 100%);/* @kind other */
  --gradient-surface-status:linear-gradient(180deg,#FFFFFF 0%,#F7F9FA 100%);/* @kind other */

  /* ---- Wallet: two distinct yellows, deliberately ---- */
  --gradient-wallet-panel:linear-gradient(135deg,#FFF4C7 0%,#F8D455 55%,#F0AE3A 100%);/* @kind other */
  --gradient-wallet-body:linear-gradient(135deg,#FFE06A 0%,#F5C62E 55%,#EDA536 100%);/* @kind other */
  --gradient-wallet-card:linear-gradient(135deg,#1F2A34 0%,#344553 100%);/* @kind other */

  /* ---- Route + info ---- */
  --gradient-route:linear-gradient(90deg,#FFF0A0 0%,#F7CD0F 50%,#F2B23E 100%);/* @kind other */
  --gradient-info:linear-gradient(120deg,#4F8FCB 0%,#8AD8F0 100%);/* @kind other */ /* In Transit emphasis only, white text */
  --gradient-nav-active:var(--gradient-button-primary);/* @kind other */
}

/* ---- tokens/motion.css ---- */
/* YAK EXPRESS motion. Animation is never the only cue for a state. */
:root{
  --duration-hover:140ms;/* @kind other */   /* 120-160ms: subtle elevation + colour shift */
  --duration-press:120ms;/* @kind other */
  --duration-panel:220ms;/* @kind other */   /* 200-240ms drawers, modals, ease-out */
  --duration-status:280ms;/* @kind other */  /* 240-320ms, pulse once, never loop */
  --duration-route:760ms;/* @kind other */   /* 600-900ms optional route reveal */
  --ease-out:cubic-bezier(.22,.61,.36,1);/* @kind other */
  --ease-standard:cubic-bezier(.4,0,.2,1);/* @kind other */
  --hover-lift:-2px;/* @kind other */        /* raise 1-2px, no glow */
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-hover:1ms;/* @kind other */--duration-press:1ms;/* @kind other */--duration-panel:1ms;/* @kind other */--duration-status:1ms;/* @kind other */--duration-route:1ms;/* @kind other */--hover-lift:0px/* @kind other */}
}