/* ============================================================================
   Aptura Design System — Foundations
   Neutral default tokens. Override per-project via the system editor.
   Source of truth: DESIGN.md (99 UX rules)
   ============================================================================ */

/* ---- Fonts ---------------------------------------------------------------- */
/* Default body/UI face: Inter (free, wide weight range, excellent legibility) */
/* Default mono: JetBrains Mono (tabular figures for data) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Color: Neutrals (primary surface scale) ---------------------------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #020617;

  /* ---- Color: Accent (single high-emphasis interactive) ------------------- */
  --color-accent-50:  #EFF6FF;
  --color-accent-100: #DBEAFE;
  --color-accent-300: #93C5FD;
  --color-accent-500: #2563EB;   /* default tertiary / CTA */
  --color-accent-600: #1D4ED8;   /* hover */
  --color-accent-700: #1E40AF;   /* pressed */
  --color-accent-900: #1E3A8A;

  /* ---- Color: Semantic --------------------------------------------------- */
  --color-success-50:  #F0FDF4;
  --color-success-500: #16A34A;
  --color-success-700: #15803D;

  --color-warning-50:  #FFFBEB;
  --color-warning-500: #D97706;
  --color-warning-700: #B45309;

  --color-error-50:    #FEF2F2;
  --color-error-500:   #DC2626;
  --color-error-700:   #B91C1C;

  --color-info-50:     #EFF6FF;
  --color-info-500:    #2563EB;
  --color-info-700:    #1D4ED8;

  /* ---- Color: Semantic role tokens (use these in UI) --------------------- */
  --primary:            var(--color-neutral-900);
  --on-primary:         var(--color-neutral-0);
  --secondary:          var(--color-neutral-500);
  --on-secondary:       var(--color-neutral-0);
  --tertiary:           var(--color-accent-500);   /* the ONE CTA color */
  --on-tertiary:        var(--color-neutral-0);

  --surface:            var(--color-neutral-0);
  --surface-variant:    var(--color-neutral-50);
  --surface-elevated:   var(--color-neutral-0);
  --on-surface:         var(--color-neutral-900);
  --on-surface-muted:   var(--color-neutral-500);
  --border:             var(--color-neutral-200);
  --border-strong:      var(--color-neutral-300);

  --fg-1:               var(--color-neutral-900);  /* primary text */
  --fg-2:               var(--color-neutral-700);  /* body */
  --fg-3:               var(--color-neutral-500);  /* muted/meta */
  --fg-4:               var(--color-neutral-400);  /* placeholder/disabled */
  --bg-1:               var(--color-neutral-0);
  --bg-2:               var(--color-neutral-50);
  --bg-3:               var(--color-neutral-100);

  /* ---- Type: Families ---------------------------------------------------- */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type: Scale (rem-based; 1rem = 16px base) -------------------------- */
  --text-xs:   0.75rem;    /* 12px — micro labels only, never body */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px — minimum body on mobile */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* ---- Type: Weights ----------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ---- Type: Line height & tracking -------------------------------------- */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-body:   1.6;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.02em;

  /* ---- Spacing (4px base; 4/8 scale only) -------------------------------- */
  --space-0:  0;
  --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;
  --space-24: 96px;

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

  /* ---- Elevation (subtle, tonal-first) ----------------------------------- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm:   0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg:   0 12px 24px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl:   0 24px 48px -8px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.40);

  /* ---- Motion ------------------------------------------------------------ */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ------------------------------------------------------------ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* ---- Touch targets (CRITICAL — non-negotiable) ------------------------- */
  --touch-min-ios:     44px;
  --touch-min-android: 48px;
  --touch-gap-min:     8px;

  /* ---- Z-index scale (no arbitrary values) ------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 20;
  --z-sticky:  40;
  --z-modal:   100;
  --z-toast:   1000;
}

/* ============================================================================
   Semantic typography classes
   ============================================================================ */
.t-display-xl { font: var(--weight-bold) var(--text-6xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-display-lg { font: var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-display    { font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h1         { font: var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.t-h2         { font: var(--weight-semi) var(--text-2xl)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.t-h3         { font: var(--weight-semi) var(--text-xl)/var(--leading-snug)  var(--font-sans);    color: var(--fg-1); }
.t-h4         { font: var(--weight-semi) var(--text-lg)/var(--leading-snug)  var(--font-sans);    color: var(--fg-1); }
.t-body-lg    { font: var(--weight-regular) var(--text-lg)/var(--leading-body)  var(--font-sans); color: var(--fg-2); }
.t-body       { font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans); color: var(--fg-2); }
.t-body-sm    { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans); color: var(--fg-2); }
.t-label      { font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); color: var(--fg-1); }
.t-label-sm   { font: var(--weight-medium) var(--text-xs)/1 var(--font-sans); letter-spacing: var(--tracking-wide); color: var(--fg-3); text-transform: uppercase; }
.t-mono       { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono); font-variant-numeric: tabular-nums; }
.t-num        { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Reduced motion (accessibility — non-negotiable)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}