@charset "UTF-8";
/* ==========================================================================
   tokens.css - design tokens for the v2 theme (Liquid Glass layered over
   AdminLTE, Apple HIG metrics). Shared by admin, customer, login, print and
   station layouts. Source: docs/design/ia-wizard-design-system.md 4.2.

   Load order (admin, ui_theme = 'v2', dashboard/layout/head-assets.php):
     adminlte.min.css -> tokens.css -> base.css -> admin-bridge.css ->
     components.css -> nav.css -> <style id="brand-vars"> (brand_css_vars()).
   The public layout (includes/public_layout.php) loads tokens.css + public.css.

   Rules
   - This is the ONLY stylesheet of the v2 theme that holds colour literals
     (hex or rgb()). base.css and components.css use var(--token) only.
   - --accent* below are the defaults for #0071E3 (brand_accent_vars()).
     brand_css_vars() (includes/branding.php) prints a later :root block per
     request with the sanitised, contrast-checked brand accent: --accent,
     --accent-rgb, --accent-fill, --on-accent, --accent-text, --accent-ui,
     --accent-text-dark, --accent-tint (decision C8).
   - Accessibility overrides (reduced transparency, increased contrast,
     reduced motion) are applied in components.css (design 4.3); the
     high-contrast values they switch to are defined here as --*-hc tokens.
   - Admin stays light in v1; the dark set applies only to
     <html data-appearance="auto"> (customer pages).
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand — overwritten per request by brand_css_vars() */
  --accent: #0071E3; --accent-rgb: 0 113 227;
  --accent-fill: #0071E3;          /* filled buttons/switches (>= 4.5:1 with --on-accent) */
  --on-accent: #FFFFFF;            /* text/icons on --accent-fill */
  --accent-text: #0071E3;          /* accent text on light surfaces (>= 4.5:1) */
  --accent-ui: #0071E3;            /* focus rings, selection marks (>= 3:1) */
  --accent-text-dark: #0D85FF;     /* accent text on dark surfaces (>= 4.5:1) */
  --accent-tint: rgb(var(--accent-rgb) / .12); --accent-tint-2: rgb(var(--accent-rgb) / .20);

  /* Grouped backgrounds & fills */
  --bg: #F2F2F7; --surface: #FFFFFF; --surface-2: #F7F7FA;
  --fill: rgb(120 120 128 / .16); --fill-2: rgb(120 120 128 / .10); --fill-3: rgb(118 118 128 / .06);
  --separator: rgb(60 60 67 / .18); --separator-opaque: #D8D8DC;

  /* Labels (label-2 on --bg ≈ 5.4:1) */
  --label: #1D1D1F; --label-2: #636366; --label-3: #8E8E93; --label-4: #C7C7CC;
  --on-dark: #FFFFFF;              /* text on --tooltip-bg / dark chips */
  --control-selected: #FFFFFF;     /* selected segment of a segmented control */

  /* Semantic — text-safe on white (≈5.2–5.3:1); backgrounds are tints */
  --success: #1E7B34; --success-rgb: 30 123 52;
  --warning: #A15C00; --warning-rgb: 161 92 0;
  --danger:  #D70015; --danger-rgb: 215 0 21;
  --info:    #0063B8; --info-rgb: 0 99 184;
  --neutral: #636366; --neutral-rgb: 99 99 102;
  --success-tint: rgb(var(--success-rgb) / .12);
  --warning-tint: rgb(var(--warning-rgb) / .12);
  --danger-tint:  rgb(var(--danger-rgb) / .12);
  --info-tint:    rgb(var(--info-rgb) / .12);
  --neutral-tint: rgb(var(--neutral-rgb) / .12);
  --mp-shopee: #EE4D2D; --mp-tiktok: #000000; --mp-tokopedia: #03AC0E;   /* marks/dots only */
  /* Level Member medals (tier level 1-4 swatches, marks only). >= 3:1 on --surface,
     --surface-2 and --bg; gold/silver/platinum darkened from the design values
     #C9A227 / #8E8E93 / #7D8FA3, which fall below 3:1 on the light grounds. */
  --tier-bronze: #B87333; --tier-silver: #86868B; --tier-gold: #A38420; --tier-platinum: #77899D;

  /* Overlays & helpers */
  --scrim: rgb(0 0 0 / .28);                        /* sheet/modal backdrop */
  --tooltip-bg: rgb(29 29 31 / .92);
  --skeleton-sheen: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .55) 50%, rgb(255 255 255 / 0) 100%);
  --wash-1: rgb(var(--accent-rgb) / .10);           /* faint accent wash behind the page (base.css) */
  --wash-2: rgb(var(--accent-rgb) / .05);

  /* Type — system stack renders SF Pro on Apple devices; no web-font download */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", var(--font-sans);        /* big point numbers */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;   /* codes */
  --fs-caption2: .6875rem; --fs-caption: .75rem; --fs-footnote: .8125rem; --fs-subhead: .9375rem;
  --fs-callout: 1rem; --fs-body: 1.0625rem; --fs-title3: 1.25rem; --fs-title2: 1.375rem;
  --fs-title1: 1.75rem; --fs-large: 2.125rem; --fs-hero: 3.25rem;       /* 11/12/13/15/16/17/20/22/28/34/52 */
  --fs-base: var(--fs-subhead);    /* admin body 15px; customer layouts set var(--fs-body) (17px) */
  --fs-input: 1rem;                /* 16px: iOS Safari never zooms on focus */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.18; --lh-body: 1.45;
  --tracking-title: -.012em;       /* large titles only */

  /* 4-pt grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Concentric radii (shell 24 → inset 8 → card 16 → control 10) */
  --r-xs: 6px; --r-control: 10px; --r-row: 12px; --r-popover: 14px; --r-card: 16px;
  --r-sheet: 22px; --r-shell: 24px; --r-capsule: 999px;

  /* Hit targets: fine pointer (desktop) vs coarse (touch) */
  --hit: 36px; --hit-lg: 44px; --hit-row: 56px; --hit-station: 64px;

  /* Admin shell geometry (design 4.4) */
  --topbar-h: 56px; --shell-gap: 8px; --sidebar-w: 264px; --sidebar-w-collapsed: 72px;
  --content-pad: 24px;

  /* Layers (aligned with Bootstrap 4: sticky 1020, fixed 1030, modal 1040/1050) */
  --z-sticky: 1020; --z-float: 1030; --z-backdrop: 1040; --z-sheet: 1050;
  --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080;

  /* Elevation — content flat, floats lifted */
  --shadow-hairline: 0 0 0 .5px var(--separator);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-float: 0 8px 28px rgb(0 0 0 / .10), 0 1px 3px rgb(0 0 0 / .06);
  --shadow-sheet: 0 28px 72px rgb(0 0 0 / .20), 0 2px 8px rgb(0 0 0 / .08);

  /* Liquid Glass materials */
  --glass-regular: rgb(250 250 252 / .68);
  --glass-thick:   rgb(250 250 252 / .84);
  --glass-clear:   rgb(255 255 255 / .30);   /* only over imagery, never over text */
  --glass-blur: 22px; --glass-saturate: 180%;
  --glass-rim:   inset 0 .5px 0 rgb(255 255 255 / .85), inset 0 0 0 .5px rgb(255 255 255 / .45);  /* specular edge */
  --glass-edge:  0 0 0 .5px rgb(0 0 0 / .08);
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / .50) 0%, rgb(255 255 255 / 0) 38%);

  /* High-contrast values, switched in by components.css under prefers-contrast: more */
  --separator-hc: rgb(60 60 67 / .55); --label-2-hc: #3A3A3C; --label-3-hc: #545458;
  --glass-regular-hc: rgb(255 255 255 / .94); --glass-thick-hc: #FFFFFF;
  --glass-edge-hc: 0 0 0 1px rgb(0 0 0 / .45);

  /* Motion */
  --dur-press: 110ms; --dur-1: 180ms; --dur-2: 260ms; --dur-sheet: 380ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: var(--ease-sheet);
  --focus-ring: 0 0 0 3px rgb(var(--accent-rgb) / .5);
}
@media (pointer: coarse) { :root { --hit: 44px; --hit-lg: 50px; } }
@media (max-width: 767.98px) { :root { --content-pad: 16px; } }
@supports (transition-timing-function: linear(0, 1)) {           /* gentle spring, ~4% overshoot — tune in browser */
  :root { --ease-spring: linear(0, .013, .05 2%, .185 4.4%, .637 11.1%, .811 14.7%, .928 18.7%, 1.004 23.3%,
                                 1.037 27.5%, 1.042 32.6%, 1.03 38.9%, 1.008 52.5%, .999 67.4%, 1); }
}

/* Dark set prepared now; customer pages use data-appearance="auto", admin stays "light" in v1 (Q6).
   Specificity (0,2,0) beats the brand block, so --accent-text switches to the dark-safe accent. */
@media (prefers-color-scheme: dark) {
  :root[data-appearance="auto"] {
    color-scheme: dark; --bg: #000000; --surface: #1C1C1E; --surface-2: #2C2C2E;
    --control-selected: #636366;
    --fill: rgb(120 120 128 / .36); --fill-2: rgb(120 120 128 / .24); --fill-3: rgb(118 118 128 / .18);
    --separator: rgb(84 84 88 / .65); --separator-opaque: #38383A;
    --label: #F5F5F7; --label-2: #AEAEB2; --label-3: #8E8E93; --label-4: #48484A;
    --accent-text: var(--accent-text-dark); --accent-ui: var(--accent-text-dark);
    --accent-tint: rgb(var(--accent-rgb) / .22); --accent-tint-2: rgb(var(--accent-rgb) / .32);
    --success: #30D158; --success-rgb: 48 209 88;
    --warning: #FFB340; --warning-rgb: 255 179 64;
    --danger:  #FF6961; --danger-rgb: 255 105 97;
    --info:    #64B5FF; --info-rgb: 100 181 255;
    --neutral: #AEAEB2; --neutral-rgb: 174 174 178;
    --success-tint: rgb(var(--success-rgb) / .16); --warning-tint: rgb(var(--warning-rgb) / .16);
    --danger-tint: rgb(var(--danger-rgb) / .16); --info-tint: rgb(var(--info-rgb) / .16);
    --neutral-tint: rgb(var(--neutral-rgb) / .16);
    --tier-bronze: #D59A5E; --tier-silver: #AEAEB2; --tier-gold: #E6C35C; --tier-platinum: #A7B6C8;   /* >= 5.7:1 on --surface/-2 */
    --scrim: rgb(0 0 0 / .48);
    --tooltip-bg: rgb(58 58 60 / .94);
    --skeleton-sheen: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .08) 50%, rgb(255 255 255 / 0) 100%);
    --wash-1: rgb(var(--accent-rgb) / .16); --wash-2: rgb(var(--accent-rgb) / .08);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .30);
    --shadow-float: 0 8px 28px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .30);
    --shadow-sheet: 0 28px 72px rgb(0 0 0 / .60), 0 2px 8px rgb(0 0 0 / .30);
    --glass-regular: rgb(30 30 32 / .62); --glass-thick: rgb(30 30 32 / .80); --glass-clear: rgb(30 30 32 / .30);
    --glass-rim: inset 0 .5px 0 rgb(255 255 255 / .18), inset 0 0 0 .5px rgb(255 255 255 / .08);
    --glass-edge: 0 0 0 .5px rgb(255 255 255 / .10);
    --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / 0) 40%);
    --separator-hc: rgb(235 235 245 / .55); --label-2-hc: #D1D1D6; --label-3-hc: #AEAEB2;
    --glass-regular-hc: rgb(28 28 30 / .94); --glass-thick-hc: #1C1C1E;
    --glass-edge-hc: 0 0 0 1px rgb(255 255 255 / .55);
  }
}