/* File: assets/css/tokens.css */
/* Design tokens — single source of truth. North Texas Auto Sales brand. */

:root{
  /* ─── Brand palette (Texas flag: navy + red + white) ── */
  --nt-navy:       #1D2951;
  --nt-navy-600:   #152041;
  --nt-navy-700:   #0E172E;
  --nt-navy-900:   #060B1C;
  --nt-red:        #B22234;
  --nt-red-600:    #951B2B;
  --nt-red-700:    #7A1622;
  --nt-cream:      #F8F5EF;
  --nt-sand:       #EDE7D9;
  --nt-silver:     #C9D2DD;
  --nt-silver-2:   #E6ECF3;
  --nt-silver-3:   #F5F8FC;
  --nt-snow:       #FFFFFF;
  --nt-ink:        #0B1220;
  --nt-ink-2:      #1F2A44;
  --nt-muted:      #5B6B82;
  --nt-muted-2:    #8795AB;

  /* ─── 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;

  /* ─── Core (light theme) ────────────────────── */
  --dag-bg:            var(--nt-snow);
  --dag-surface:       var(--nt-snow);
  --dag-surface-2:     var(--nt-silver-3);
  --dag-surface-3:     var(--nt-cream);
  --dag-text:          var(--nt-ink);
  --dag-text-2:        var(--nt-ink-2);
  --dag-muted:         var(--nt-muted);
  --dag-muted-2:       var(--nt-muted-2);
  --dag-border:        var(--nt-silver-2);
  --dag-border-strong: var(--nt-silver);

  /* ─── Brand tokens (semantic) ───────────────── */
  --dag-primary:           var(--nt-navy);
  --dag-primary-hover:     var(--nt-navy-600);
  --dag-primary-active:    var(--nt-navy-700);
  --dag-primary-contrast:  var(--nt-snow);

  --dag-secondary:           var(--nt-red);
  --dag-secondary-hover:     var(--nt-red-600);
  --dag-secondary-active:    var(--nt-red-700);
  --dag-secondary-contrast:  var(--nt-snow);

  --dag-accent:           var(--nt-red);
  --dag-accent-hover:     var(--nt-red-600);
  --dag-accent-contrast:  var(--nt-snow);

  --dag-link:       var(--nt-navy);
  --dag-link-hover: var(--nt-red);

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

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

  /* ─── Elevation ─────────────────────────────── */
  --dag-shadow-xs: 0 1px 2px rgba(29,41,81,.06), 0 2px 6px rgba(29,41,81,.05);
  --dag-shadow-sm: 0 2px 6px rgba(29,41,81,.08), 0 10px 24px rgba(6,11,28,.07);
  --dag-shadow-md: 0 8px 24px rgba(29,41,81,.10), 0 20px 50px rgba(6,11,28,.10);
  --dag-shadow-lg: 0 16px 40px rgba(29,41,81,.14), 0 30px 80px rgba(6,11,28,.14);
  --dag-shadow:    var(--dag-shadow-md);

  /* ─── 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(29,41,81,.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;

  /* ─── Back-compat aliases (keep existing CSS stable) ── */
  --bg:               var(--dag-bg);
  --surface:          var(--dag-surface);
  --surface-2:        var(--dag-surface-2);
  --text:             var(--dag-text);
  --muted:            var(--dag-muted);
  --line:             var(--dag-border);
  --border:           var(--dag-border);
  --primary:          var(--dag-primary);
  --primary-contrast: var(--dag-primary-contrast);
  --accent:           var(--dag-accent);
  --brand:            var(--dag-link);
  --brand-2:          var(--dag-accent);
  --danger:           var(--dag-danger);
  --radius:           var(--dag-radius-md);
  --shadow:           var(--dag-shadow-md);
  --shadow-soft:      var(--dag-shadow-sm);
  --container:        var(--dag-container);
  --gutter:           var(--dag-gutter);
  --ring:             var(--dag-ring-color);
}

@media (max-width: 900px){
  :root{
    --dag-section:   44px;
    --dag-gutter-lg: 18px;
  }
}