/* ============================================================
   ATLAS · Design tokens
   Source: atlas-think.html :root (canonical) — app.thinkbrand.mx
   Extracted from local source. Load once, then delete the per-file
   :root blocks and let each page inherit from here.

   Usage:
     <link rel="stylesheet" href="design-system/tokens.css">
   or @import "design-system/tokens.css"; at the top of a <style>.

   Tokens under "normalized" are proposed scales derived from
   observed usage — adopt gradually, they are not yet literal in source.
   ============================================================ */

:root {
  /* — brand — */
  --orange: #FB3A1E;  --orange-d: #C42A12;  --orange-soft: #FFEDE9;
  --teal: #12B5A6;    --teal-d: #0B7E73;    --teal-soft: #E3F7F4;
  --amber: #FFB23E;   --violet: #6B5BE6;

  /* — semantic status — */
  --good: #1FA85A;  --warn: #E8912A;  --danger: #D92D20;

  /* — text — */
  --text: #1D1D1F;  --text2: #565659;  --text3: #67676C;

  /* — surface / glass — */
  --bg: #ECECEF;
  --surface: #fff;
  --line: rgba(0,0,0,.08);
  --glass: rgba(255,255,255,.55);
  --glass-2: rgba(255,255,255,.72);
  --glass-bd: rgba(255,255,255,.75);

  /* — sidebar — */
  --side: #0A0A0A;  --side2: #18181A;  --side-tx: #A1A1A6;  --side-tx2: #6E6E73;

  /* — ambient blobs — */
  --blob1: rgba(251,58,30,.13);
  --blob2: rgba(18,181,166,.11);
  --blob3: rgba(255,178,62,.10);

  /* — shadow — */
  --shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.05), 0 16px 44px rgba(0,0,0,.1);
  --shadow-panel: 0 1px 2px rgba(0,0,0,.03);

  /* — type — */
  --disp: 'Clash Display', -apple-system, system-ui, sans-serif;
  --body: 'Satoshi', -apple-system, system-ui, sans-serif;

  /* — radius — */
  --r: 18px;  --r-sm: 12px;

  /* — motion — */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-press: 160ms;  --dur-fade: 250ms;  --dur-lift: 350ms;  --dur-theme: 600ms;

  /* — normalized (proposed) spacing scale — */
  --sp-xs: 8px;  --sp-sm: 12px;  --sp-md: 16px;  --sp-lg: 20px;  --sp-xl: 24px;
}

/* — dark mode (activate with <body class="night">) — */
body.night {
  --bg: #070708;  --surface: #161618;  --text: #F5F5F7;  --text2: #A0A0A6;  --text3: #6E6E73;
  --line: rgba(255,255,255,.1);
  --glass: rgba(28,28,30,.5);  --glass-2: rgba(32,32,35,.7);  --glass-bd: rgba(255,255,255,.1);
  --orange-soft: #2A1410;  --teal-soft: #0C2421;
  --blob1: rgba(251,58,30,.18);  --blob2: rgba(18,181,166,.15);  --blob3: rgba(255,178,62,.12);
  --shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.6);
}

/* — shared interaction + a11y baseline (matches Ruta A polish) — */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

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