/* ─────────────────────────────────────────────────────────────────────────────
   aRTy TAX — Design Tokens
   Based on JPS Design Guidelines. Brand overrides: RT red primary, teal.
   ───────────────────────────────────────────────────────────────────────────── */

/* Self-hosted UI body font. @import here (not a per-page <link>) so every page
   that loads tokens.css gets Plus Jakarta Sans at the correct relative path,
   regardless of the page's directory depth. The wordmark stays Manrope and is
   rendered as a PNG, so it is unaffected by this. */
@import url('../fonts/plus-jakarta-sans.css');

:root {
  /* ── Brand ── */
  --color-brand-red:        #CB333B;
  --color-brand-red-hover:  #AC2B32;
  --color-brand-red-active: #8E2429;
  --color-brand-red-pale:   #FEEBEE;
  --color-brand-navy:       var(--color-brand-teal);       /* DEPRECATED - use teal */
  --color-brand-navy-light: var(--color-brand-teal-light); /* DEPRECATED - use teal */
  --color-brand-teal:       #2E8B8B;
  --color-brand-teal-light: #3AABAB;

  /* RSM co-brand palette. These are explicit brand colors, not semantic
     remaps: existing primary/success/warning/info behavior stays unchanged. */
  --color-brand-rsm-blue:       #019CDE;
  --color-brand-rsm-blue-pale:  #EBF7FC;
  --color-brand-rsm-green:      #3F9C35;
  --color-brand-rsm-gray:       #62666A;

  /* ── Semantic: Primary action (brand red) ── */
  --color-primary:          var(--color-brand-red);
  --color-primary-hover:    var(--color-brand-red-hover);
  --color-primary-active:   var(--color-brand-red-active);
  --color-primary-pale:     var(--color-brand-red-pale);

  /* ── Semantic: Status ── */
  --color-destructive:      #FF3B30;
  --color-success:          #34C759;
  --color-warning:          #FF9500;
  --color-info:             #5AC8FA;

  /* ── Surfaces (light mode) ── */
  --color-bg-primary:       #FFFFFF;
  --color-bg-secondary:     #F5F5F7;
  --color-bg-tertiary:      #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-overlay:  rgba(0, 0, 0, 0.40);

  /* ── Text (light mode) ── */
  --color-text-primary:     #1D1D1F;
  --color-text-secondary:   #6E6E73;
  --color-text-tertiary:    #AEAEB2;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        var(--color-primary);

  /* ── Borders (light mode) ── */
  --color-border-default:   #D1D1D6;
  --color-border-strong:    #8E8E93;

  /* ── State overlays ── */
  --state-hover-overlay:    rgba(0, 0, 0, 0.04);
  --state-active-overlay:   rgba(0, 0, 0, 0.08);
  --state-focus-ring:       var(--color-primary);
  --state-disabled-opacity: 0.4;

  /* ── Typography ──
     Manrope is the brand font (matches the wordmark). Geist Mono is the
     companion mono. Both are self-hosted in assets/fonts/ — never CDN.
     System-font fallbacks remain in the chain only for the brief window
     before the @font-face load completes. */
  --font-sans:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'Geist Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;

  /* Type scale (JPS) */
  --text-large-title:  2.125rem;   /* 34px — hero */
  --text-title-1:      1.75rem;    /* 28px — section headers */
  --text-title-2:      1.375rem;   /* 22px — subsection */
  --text-title-3:      1.25rem;    /* 20px — group headers */
  --text-headline:     1.0625rem;  /* 17px — semibold emphasis */
  --text-body:         1.0625rem;  /* 17px — primary reading */
  --text-callout:      1.0rem;     /* 16px — secondary desc */
  --text-subhead:      0.9375rem;  /* 15px — metadata */
  --text-footnote:     0.8125rem;  /* 13px — fine print */
  --text-caption-1:    0.75rem;    /* 12px — labels, tags */
  --text-caption-2:    0.6875rem;  /* 11px — smallest */

  /* Leading */
  --leading-tight:    1.2;
  --leading-normal:   1.4;
  --leading-relaxed:  1.6;

  /* Tracking */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-loose:    0.02em;

  /* ── Spacing (base-4) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Border radius ── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Elevation (shadows) ── */
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.10);
  --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --elevation-4: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* ── Motion ── */
  --duration-micro:    150ms;
  --duration-standard: 300ms;
  --duration-complex:  450ms;
  --duration-emphasis: 600ms;

  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:   cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:    cubic-bezier(0.4, 0, 1, 1);

  /* ── Layout ── */
  --container-max:  1200px;
  --nav-height:     60px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}