/* ==========================================================================
   tokens.css: Trishify Tech Studios design tokens
   Two layers: raw PALETTE (theme-agnostic) -> SEMANTIC (role-based).
   Components consume ONLY semantic tokens, so dark mode is one override block.
   ========================================================================== */

:root {
  color-scheme: light dark; /* lets the UA theme native controls/scrollbars */

  /* ---- palette (raw brand values) ---- */
  --brand-navy:    #1B3A6B;
  --accent:        #2563EB; /* Ocean Blue (DueMinder default) */
  --accent-ink:    #1D4ED8; /* darker accent for hover/active on light */
  --grad-sky:      #38BDF8;
  --grad-blue:     #2563EB;
  --grad-indigo:   #4F46E5;
  --c-red:         #EF4444;
  --c-green:       #22C55E;
  --c-amber:       #F59E0B;
  --c-blue:        #3B82F6;

  /* ---- semantic: LIGHT (default) ---- */
  --bg:            #F8FAFC;
  --bg-2:          #EEF2F8; /* subtle alt section */
  --bg-elev:       #FFFFFF; /* cards */
  --bg-inset:      #F1F5F9; /* inputs, code, pills */
  --text:          #0D1321;
  --text-2:        #5A6A7E;
  --text-3:        #96A3B4;
  --border:        #E3E8EF;
  --border-strong: #CBD5E1;
  --link:          var(--accent);
  --link-hover:    var(--accent-ink);
  --on-accent:     #FFFFFF;
  --shadow-sm:     0 1px 2px rgba(13,19,33,.06);
  --shadow:        0 1px 2px rgba(13,19,33,.06), 0 10px 30px rgba(13,19,33,.08);
  --shadow-lg:     0 20px 60px rgba(13,19,33,.14);
  --focus-ring:    0 0 0 3px rgba(37,99,235,.45);
  --hairline:      rgba(13,19,33,.08);
  --glass:         rgba(248,250,252,.72); /* sticky header backdrop */

  /* ---- scale & type (shared across themes) ---- */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-tile: 22px;
  --radius-pill: 999px;

  --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;

  --maxw: 1120px;
  --maxw-prose: 760px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(.8rem, .77rem + .15vw, .875rem);
  --step-0:  clamp(.95rem, .92rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.1rem, 1.04rem + .35vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.22rem + .6vw, 1.7rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.1vw, 2.3rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --step-5:  clamp(2.5rem, 1.7rem + 3.4vw, 4.2rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .28s;
}

/* ---- semantic: DARK ---- */
[data-theme="dark"] {
  --bg:            #0F172A;
  --bg-2:          #131F38;
  --bg-elev:       #1E293B;
  --bg-inset:      #0B1324;
  --text:          #EEF2F7;
  --text-2:        #94A3B8;
  --text-3:        #64748B;
  --border:        #243244;
  --border-strong: #334155;
  --link:          #7AA8DC;
  --link-hover:    #A8C6EC;
  --on-accent:     #FFFFFF;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
  --shadow-lg:     0 24px 70px rgba(0,0,0,.6);
  --hairline:      rgba(255,255,255,.08);
  --glass:         rgba(15,23,42,.72);
}