/* ============================================================
   ACCOUNTITFAST (AIF) — DESIGN TOKENS  (CPANEL009 · Part 4)
   The single source of truth for the AIF design system.

   Loaded FIRST on every styled page. The sheets that follow
   declare only page-specific extras — they must never
   re-declare these tokens.

   Identity: deep charcoal surfaces, orange brand, frosted
   glass, Sora (display) + Inter (body), mobile-first.
   ============================================================ */

:root {
  /* ---------------- COLOR · SURFACES ---------------- */
  --bg:        #07090d;                 /* app background      */
  --bg-2:      #0b0e14;                 /* raised background   */
  --panel:     #0f131b;                 /* cards / inputs      */
  --panel-2:   #141925;                 /* nested panels       */
  --line:      rgba(255,255,255,.07);   /* hairline border     */
  --line-2:    rgba(255,255,255,.14);   /* strong border       */

  /* ---------------- COLOR · TEXT ---------------- */
  --txt:       #eef1f6;                 /* primary             */
  --txt-2:     #a6adbd;                 /* secondary           */
  --txt-3:     #828ba0;                 /* muted · CPANEL023 bump for AA contrast (was #6d7586) */

  /* ---------------- COLOR · BRAND & STATUS ---------------- */
  --orange:    #ff7a1a;                 /* brand               */
  --orange-2:  #ffa14d;                 /* brand light         */
  --orange-hot:#ff5c00;                 /* brand deep          */
  --green:     #2ee6a8;                 /* success             */
  --red:       #ff5d6c;                 /* danger / error      */
  --yellow:    #ffd166;                 /* warning             */
  --grad:      linear-gradient(135deg,#ffb25e 0%,#ff7a1a 48%,#ff5c00 100%);
  --grad-soft: linear-gradient(135deg,rgba(255,178,94,.16),rgba(255,92,0,.16));

  /* ---------------- TYPOGRAPHY ---------------- */
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* AGENDA010-UX: readable by default — body 16px+, generous leading.
     Each tier was bumped so content stops feeling cramped, without
     sheets having to re-declare anything. */
  --fs-xs:   .70rem;                                        /* labels / kbd   */
  --fs-sm:   .80rem;                                        /* secondary text */
  --fs-md:   .92rem;                                        /* body           */
  --fs-lg:   1.06rem;                                       /* card titles    */
  --fs-xl:   1.3rem;                                        /* section titles */
  --fs-hero: clamp(1.45rem, 4.6vw, 1.95rem);                /* page titles    */
  --lh-body: 1.6;                                           /* body leading   */
  --lh-tight: 1.35;                                         /* headings       */

  /* ---------------- SPACING (4px scale) ---------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;

  /* ---------------- RADII ---------------- */
  --r-xs:     8px;
  --r-sm:    12px;
  --r-md:    16px;
  --r-lg:    18px;
  --r-full: 100px;

  /* ---------------- SHADOWS ---------------- */
  --shadow-sm:     0 4px 14px rgba(0,0,0,.35);
  --shadow-md:     0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:     0 30px 80px rgba(0,0,0,.6);
  --shadow-orange: 0 0 16px rgba(255,122,26,.25);

  /* ---------------- MOTION ---------------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t-mid:  .25s;
  --t-slow: .35s;

  /* ---------------- Z-INDEX SCALE ---------------- */
  --z-base:     1;      /* content                            */
  --z-sticky:  40;      /* sticky bars (dash topbar)          */
  --z-topbar: 100;      /* hub/admin topbars, menus           */
  --z-overlay: 800;     /* command palette                    */
  --z-modal:   900;     /* shortcuts panel, modals            */
  --z-toast:   950;     /* toasts above everything            */

  /* ---------------- BREAKPOINTS (reference) ----------------
     Mobile-first tiers used across the app:
       480 · 559 · 619 · 640 · 760 · 768 · 980 · 1059 · 1100 · 1280 · 1400 px
     (CSS media queries cannot read custom properties —
      keep these values consistent in the sheets.) */
}

/* ============================================================
   CPANEL069 · Part 67 — LIGHT THEME (data-theme="light" on <body>)
   The app is dark-first; opting into light flips the tokens.
   ============================================================ */
[data-theme="light"] {
  --bg:        #f4f5f8;
  --bg-2:      #ffffff;
  --panel:     #ffffff;
  --panel-2:   #eef0f5;
  --line:      rgba(12,18,32,.09);
  --line-2:    rgba(12,18,32,.17);
  --txt:       #161a22;
  --txt-2:     #454e5e;
  --txt-3:     #5a6474;
  --green:     #0b8f5e;
  --red:       #cf2f43;
  --yellow:    #9a5a00;
  --orange-2:  #c75b00;
  --shadow-sm: 0 4px 14px rgba(16,24,40,.12);
  --shadow-md: 0 12px 30px rgba(16,24,40,.16);
  --shadow-lg: 0 30px 80px rgba(16,24,40,.22);
  --shadow-orange: 0 0 16px rgba(255,122,26,.28);
  --grad-soft: linear-gradient(135deg,rgba(255,178,94,.14),rgba(255,92,0,.14));
}

/* ---------------- SKIP LINK (WCAG) ---------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--orange);
  color: #1a0d02;
  font-weight: 700;
  font-size: .8rem;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---------------- FOCUS ---------------- */
/* Keyboard users must always see where they are — even on
   controls that reset `outline` for mouse aesthetics. */
:root :focus-visible {
  outline: 2px solid var(--orange-2) !important;
  outline-offset: 2px;
}

/* ============================================================
   CPANEL031 · Part 27 — user preference: reduce motion
   ============================================================ */
html.aif-rm *, html.aif-rm *::before, html.aif-rm *::after {
  animation: none !important;
  transition: none !important;
}