/* File: assets/css/tokens.css */
/* Design tokens — single source of truth. Do not redefine :root elsewhere. */

:root{
  /* ─── Typography ───────────────────────────── */
  --dag-font:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dag-font-display:  "Bebas Neue", "Antonio", "Inter", system-ui, sans-serif;
  --dag-font-mono:     "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --dag-lh:            1.6;

  /* ─── Layout ────────────────────────────────── */
  --dag-container:   1200px;
  --dag-gutter:      18px;
  --dag-gutter-lg:   26px;
  --dag-section:     72px;
  --dag-header-h:    72px;

  /* ─── Brand palette (USA Auto Sales: blue + teal + red + violet) ──────── */
  --ga-blue:         #194CCC;   /* primary — saturated blue */
  --ga-blue-600:     #1340A8;   /* hover */
  --ga-blue-700:     #0E3486;   /* active */

  --ga-night:        #007F98;   /* secondary — deep teal */
  --ga-night-2:      #00697D;

  --ga-red:          #CC0001;   /* CTA accent — alert red */
  --ga-red-600:      #A50001;
  --ga-red-700:      #800001;

  --ga-violet:       #7F66E5;   /* hint / badge */
  --ga-violet-2:     #6A52CE;

  --ga-silver:       #C9D2DD;   /* metallic border */
  --ga-silver-2:     #E2E8F0;   /* divider neutral */
  --ga-silver-3:     #F3F6FB;   /* bg-soft cool */

  /* ─── Core palette (light theme) ────────────── */
  --dag-bg:          #FFFFFF;
  --dag-surface:     #FFFFFF;
  --dag-surface-2:   var(--ga-silver-3);
  --dag-surface-3:   #ECF1F8;
  --dag-text:        #0B1220;
  --dag-text-2:      #1F2A44;
  --dag-muted:       #5B6B82;
  --dag-muted-2:     #8795AB;
  --dag-border:      var(--ga-silver-2);
  --dag-border-strong: #CBD5E1;

  /* ─── Brand tokens (semantic) ───────────────── */
  --dag-primary:          var(--ga-blue);
  --dag-primary-hover:    var(--ga-blue-600);
  --dag-primary-active:   var(--ga-blue-700);
  --dag-primary-contrast: #FFFFFF;

  --dag-secondary:          var(--ga-night);
  --dag-secondary-hover:    var(--ga-night-2);
  --dag-secondary-contrast: #FFFFFF;

  --dag-accent:           var(--ga-red);
  --dag-accent-hover:     var(--ga-red-600);
  --dag-accent-active:    var(--ga-red-700);
  --dag-accent-contrast:  #FFFFFF;

  --dag-hint:             var(--ga-violet);
  --dag-hint-hover:       var(--ga-violet-2);
  --dag-hint-contrast:    #FFFFFF;

  --dag-link:         var(--ga-blue);
  --dag-link-hover:   var(--ga-blue-700);

  /* ─── Status ────────────────────────────────── */
  --dag-success:  #16A34A;
  --dag-warning:  #D97706;
  --dag-danger:   var(--ga-red);
  --dag-info:     var(--ga-blue);

  /* ─── Radius ────────────────────────────────── */
  --dag-radius-xs:   2px;
  --dag-radius-sm:   4px;
  --dag-radius-md:   4px;
  --dag-radius-lg:   6px;
  --dag-radius-xl:   8px;
  --dag-radius-pill: 4px;
  --dag-radius:      var(--dag-radius-md);

  /* ─── Elevation (light-theme safe: blue tint) ── */
  --dag-shadow-xs:  0 1px 2px rgba(25,76,204,.06), 0 2px 6px rgba(25,76,204,.05);
  --dag-shadow-sm:  0 2px 6px rgba(25,76,204,.08), 0 10px 24px rgba(0,127,152,.07);
  --dag-shadow-md:  0 8px 24px rgba(25,76,204,.10), 0 20px 50px rgba(0,127,152,.10);
  --dag-shadow-lg:  0 16px 40px rgba(25,76,204,.14), 0 30px 80px rgba(0,127,152,.14);

  /* ─── Spacing ───────────────────────────────── */
  --dag-gap-xs:  6px;
  --dag-gap-sm:  12px;
  --dag-gap:     16px;
  --dag-gap-lg:  24px;
  --dag-gap-xl:  32px;
  --dag-gap-2xl: 48px;

  /* ─── Interaction ───────────────────────────── */
  --dag-ring-color: rgba(25,76,204,.22);
  --dag-ring:       0 0 0 4px var(--dag-ring-color);
  --dag-transition: 160ms cubic-bezier(.2,.8,.2,1);

  /* ─── Motion ────────────────────────────────── */
  --anim-fast:  150ms;
  --anim-med:   220ms;
  --anim-slow:  420ms;
  --ease-out:   cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.2,1,.2,1);

  /* ─── Misc ──────────────────────────────────── */
  --dag-max-prose: 72ch;

  /* ─── Layout: split header ──────────────────────────── */
  --dag-topbar-h:    36px;
  --dag-topbar-bg:   var(--ga-night);
  --dag-topbar-fg:   #FFFFFF;
  --dag-topbar-muted: rgba(255,255,255,.65);

  /* ─── Section backgrounds (alternation) ─────────────── */
  --dag-sec-white:   #FFFFFF;
  --dag-sec-soft:    var(--ga-silver-3);
  --dag-sec-dark:    var(--ga-night);
  --dag-sec-dark-fg: #FFFFFF;

  /* ═══ Back-compat aliases (keep existing CSS stable) ═══ */
  --bg:               var(--dag-bg);
  --surface:          var(--dag-surface);
  --surface-2:        var(--dag-surface-2);
  --surface-raised:   var(--dag-surface);
  --text:             var(--dag-text);
  --muted:            var(--dag-muted);
  --line:             var(--dag-border);
  --border:           var(--dag-border);
  --border-strong:    var(--dag-border-strong);

  --primary:          var(--dag-primary);
  --primary-600:      var(--dag-primary-hover);
  --primary-700:      var(--dag-primary-active);
  --primary-contrast: var(--dag-primary-contrast);
  --secondary:        var(--dag-secondary);
  --accent:           var(--dag-accent);
  --accent-2:         var(--dag-primary);
  --brand:            var(--dag-primary);
  --brand-2:          var(--dag-secondary);

  --success:          var(--dag-success);
  --warning:          var(--dag-warning);
  --danger:           var(--dag-danger);
  --error:            var(--dag-danger);
  --info:             var(--dag-info);

  --radius:           var(--dag-radius);
  --radius-sm:        var(--dag-radius-sm);
  --radius-md:        var(--dag-radius-md);
  --radius-lg:        var(--dag-radius-lg);
  --radius-card:      var(--dag-radius-md);
  --radius-chip:      var(--dag-radius-pill);
  --radius-control:   var(--dag-radius-sm);

  --shadow:           var(--dag-shadow-md);
  --shadow-soft:      var(--dag-shadow-sm);
  --shadow-card:      var(--dag-shadow-sm);
  --shadow-card-hover: var(--dag-shadow-md);

  --container:        var(--dag-container);
  --gutter:           var(--dag-gutter);
  --pad:              var(--dag-gap);
  --ring:             var(--dag-ring-color);

  /* Pagination (inherits brand) */
  --pagi-accent-rgb: 25, 76, 204;
  --pagi-h:          40px;
  --pagi-gap:        8px;
  --pagi-radius:     12px;
  --pagi-accent:     var(--dag-primary);
  --pagi-bg:         var(--dag-surface);
  --pagi-bg-hover:   rgba(25,76,204,.08);
  --pagi-text:       var(--dag-text);
  --pagi-muted:      var(--dag-muted);
  --pagi-border:     var(--dag-border);
  --pagi-shadow:     var(--dag-shadow-sm);
  --pagi-glow:       0 14px 34px rgba(25,76,204,.18);
  --pagi-ring:       0 0 0 3px rgba(25,76,204,.20);

  /* Inventory legacy (--cyp-*) mapped to brand */
  --cyp-green:     var(--dag-primary);
  --cyp-green-2:   rgba(25,76,204,.10);
  --cyp-text:      var(--dag-text);
  --cyp-muted:     var(--dag-muted);
  --cyp-bg:        var(--dag-bg);
  --cyp-soft:      var(--dag-surface-2);
  --cyp-border:    var(--dag-border);
  --cyp-shadow:    var(--dag-shadow-sm);
  --cyp-radius:    18px;
  --cyp-radius-sm: 12px;
  --cyp-container: var(--dag-container);
  --cyp-t:         220ms;
}

@media (max-width: 900px){
  :root{
    --dag-section:   48px;
    --dag-gutter-lg: 18px;
    --dag-header-h:    72px;
  }
}

@media (max-width: 600px){
  :root{
    --dag-section:  36px;
    --dag-gutter:   14px;
    --pagi-h:       36px;
    --pagi-gap:     6px;
    --pagi-radius:  10px;
  }
}

/* MINT-WEEKS-01 2026-08-28 — palette: white / blue / light-blue, black text.
   Owner request. Overrides the donor template's blue+teal+red+violet set at the TOKEN level,
   last :root wins, so every component that reads a token follows without per-rule edits.
   Blues are sampled from the uploaded logo (#0663A8 / #0679C6). Red is gone: --ga-red now
   carries the logo blue, because the palette the owner asked for has no red in it.
   Every white-on-colour pair below was contrast-checked, not eyeballed. */
:root{
  --ga-blue: #0A5FA8;
  --ga-blue-600: #084E8A;
  --ga-blue-700: #063E6E;
  --ga-night: #0A5FA8;
  --ga-night-2: #084E8A;
  --ga-red: #0679C6;
  --ga-red-600: #0A67AA;
  --ga-red-700: #085489;
  --ga-violet: #4FAFE4;
  --ga-violet-2: #2E9AD8;
  --ga-silver: #BBD9EE;
  --ga-silver-2: #D9E9F6;
  --ga-silver-3: #F2F9FE;
  --dag-bg: #FFFFFF;
  --dag-surface: #FFFFFF;
  --dag-surface-3: #E6F3FC;
  --dag-text: #000000;
  --dag-text-2: #111111;
  --dag-muted: #44515F;
  --dag-muted-2: #5E6B7A;
  --dag-border-strong: #A8CCE7;
  --dag-hint-contrast: #000000;
  --dag-topbar-bg: #0A5FA8;
  --dag-topbar-fg: #FFFFFF;
  --dag-sec-dark: #0A5FA8;
  --dag-sec-dark-fg: #FFFFFF;
}