/* ============================================================================
   SKILLGATE · Design Tokens  (single source of truth for the whole brand)
   Dark premium "AI-verification lab". Graphite base, milk text,
   copper/amber/silver/graphite-green accents. NO blue / NO violet.
   ============================================================================ */

:root {
  /* ---- Surfaces (depth stack, darkest → lightest) ---- */
  --bg-0:        #050505;   /* page void */
  --bg-1:        #08090B;   /* base scene */
  --bg-2:        #0B0D10;   /* raised scene */
  --surface-1:   #101216;   /* card */
  --surface-2:   #14171D;   /* card hover / nested */
  --surface-3:   #1B1F27;   /* second layer / popover */
  --surface-4:   #232834;   /* tooltips, active rows */

  /* ---- Borders & lines ---- */
  --line:        rgba(255,255,255,0.08);
  --line-soft:   rgba(255,255,255,0.05);
  --line-strong: rgba(255,255,255,0.14);
  --line-copper: rgba(200,133,90,0.35);

  /* ---- Text ---- */
  --text:        #F5F2EA;   /* primary milk */
  --text-2:      #A8A29A;   /* secondary */
  --text-muted:  #6F6A61;   /* muted */
  --text-faint:  #4A4843;   /* faint / disabled */
  --text-ink:    #0A0A0B;   /* text on light buttons */

  /* ---- Accents (warm, metallic) ---- */
  --copper:      #C8855A;   /* primary warm accent */
  --copper-hi:   #E0A86A;   /* amber highlight */
  --copper-lo:   #8A5A3A;   /* deep copper */
  --amber:       #E3B574;
  --silver:      #C9CDD6;   /* cool metallic line/secondary */
  --gold-glow:   rgba(224,168,106,0.55);
  --milk-glow:   rgba(245,242,234,0.18);

  /* ---- Status (calm, never neon) ---- */
  --ok:          #7FA88B;   /* graphite-green success / approved */
  --ok-soft:     rgba(127,168,139,0.14);
  --warn:        #D9A85C;   /* amber warning */
  --warn-soft:   rgba(217,168,92,0.14);
  --danger:      #C46A5E;   /* muted red */
  --danger-soft: rgba(196,106,94,0.14);
  --info:        #9AA0A6;   /* neutral grey info (no blue) */

  /* ---- Brand gradient bits ---- */
  --grad-copper: linear-gradient(135deg, #E0A86A 0%, #C8855A 45%, #8A5A3A 100%);
  --grad-milk:   linear-gradient(180deg, #FBF8F0 0%, #E7E2D6 100%);
  --grad-scene:  radial-gradient(1200px 700px at 70% -10%, rgba(200,133,90,0.10), transparent 60%),
                 radial-gradient(900px 600px at 10% 110%, rgba(127,168,139,0.06), transparent 55%);

  /* ---- Typography ---- */
  --font-sans: "Inter","Geist","Manrope","Segoe UI Variable Display","Segoe UI",
               system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono: "JetBrains Mono","Geist Mono","Cascadia Code","IBM Plex Mono",
               ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  34px;
  --fs-3xl:  46px;
  --fs-4xl:  64px;
  --fs-hero: clamp(40px, 6.2vw, 82px);

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.12em;
  --tracking-caps:  0.22em;

  /* ---- Radii ---- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --s-11: 96px; --s-12: 128px;

  /* ---- Elevation (soft, deep, never harsh) ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 6px 20px rgba(0,0,0,0.45);
  --sh-3: 0 18px 50px rgba(0,0,0,0.55);
  --sh-4: 0 40px 90px rgba(0,0,0,0.6);
  --sh-inset:  inset 0 1px 0 rgba(255,255,255,0.05);
  --sh-glow:   0 0 0 1px var(--line-copper), 0 12px 40px rgba(200,133,90,0.18);
  --ring:      0 0 0 3px rgba(224,168,106,0.25);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-mid:  260ms;
  --t-slow: 520ms;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-wide: 1360px;
  --nav-h: 68px;
  --sidebar-w: 248px;
  --z-nav: 100; --z-pop: 200; --z-modal: 300; --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}