/* ============================================================================
   UMRAH OS — DESIGN TOKENS
   Single source of truth for colour, type, space, radius, elevation, motion.
   Everything downstream (ui.css, screens, the guide) consumes these only.
   ========================================================================== */

:root {
  /* ---- Brand ramps ------------------------------------------------------ */
  --emerald-50:  #EAF4EF;
  --emerald-100: #CFE7DC;
  --emerald-200: #A5D2C0;
  --emerald-300: #6FB79E;
  --emerald-400: #3E997C;
  --emerald-500: #157F60;
  --emerald-600: #0B6B4F;   /* primary */
  --emerald-700: #085840;
  --emerald-800: #064330;
  --emerald-900: #042E21;

  --gold-50:  #FBF6E9;
  --gold-100: #F5EAC9;
  --gold-200: #EBD79D;
  --gold-300: #DFC072;
  --gold-400: #D2AC55;
  --gold-500: #C8A24A;      /* accent */
  --gold-600: #AA8637;
  --gold-700: #86682A;
  --gold-800: #614B1E;
  --gold-900: #3F3113;

  --char-50:  #F6F7F8;
  --char-100: #ECEEF0;
  --char-200: #DCE0E4;
  --char-300: #C2C8CE;
  --char-400: #98A1AA;
  --char-500: #6C767F;
  --char-600: #4C555D;
  --char-700: #343B41;
  --char-800: #22272B;
  --char-900: #14171A;
  --char-950: #0C0E10;

  /* ---- Semantic ramps --------------------------------------------------- */
  --ok-50:#E9F6EE;  --ok-100:#C9E9D6;  --ok-500:#1C9B4B;  --ok-600:#16803D;  --ok-700:#106230;
  --warn-50:#FEF4E4;--warn-100:#FBE3B9;--warn-500:#D9880B;--warn-600:#B36F06;--warn-700:#8A5504;
  --err-50:#FDECEC; --err-100:#F8CFCF; --err-500:#D33F3F;  --err-600:#B22E2E;  --err-700:#8C2323;
  --info-50:#E9F1FB;--info-100:#CBDFF6;--info-500:#2A6FD1;--info-600:#1F58AA; --info-700:#174483;

  /* ---- Light theme (default) ------------------------------------------- */
  --bg:            #F7F8F7;
  --bg-subtle:     #EFF1F0;
  --surface:       #FFFFFF;
  --surface-2:     #FBFBFA;
  --surface-3:     #F3F5F4;
  --surface-inv:   var(--char-900);
  --overlay:       rgba(12,14,16,.44);

  --text:          var(--char-900);
  --text-2:        var(--char-600);
  --text-3:        var(--char-500);
  --text-4:        var(--char-400);
  --text-inv:      #FFFFFF;
  --text-brand:    var(--emerald-700);

  --border:        #E4E7E6;
  --border-2:      #C9CFCD;   /* raised from #D3D8D6 — 1.44:1 was invisible in sunlight */
  --border-strong: var(--char-400);
  /* Focus must be visible outdoors at midday. A translucent ring measured
     1.84:1 against surface; a solid emerald ring measures ~5.2:1. */
  --ring:          var(--emerald-600);

  --primary:       var(--emerald-600);
  --primary-hover: var(--emerald-700);
  --primary-soft:  var(--emerald-50);
  --primary-text:  #FFFFFF;

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-soft:   var(--gold-50);
  --accent-text:   var(--char-950);

  --shadow-color:  220 12% 22%;

  /* ---- Type ------------------------------------------------------------- */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052,
               Palatino, "Book Antiqua", Georgia, serif;
  --font-ar:   "Geeza Pro", "Al Bayan", "SF Arabic", "Traditional Arabic", "Amiri",
               "Scheherazade New", "Noto Naskh Arabic", serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 21px;
  --fs-3xl: 26px;
  --fs-4xl: 32px;
  --fs-5xl: 40px;
  --fs-6xl: 52px;
  --fs-7xl: 68px;

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --tr-tight: -0.02em;
  --tr-snug:  -0.01em;
  --tr-wide:  0.02em;
  --tr-caps:  0.09em;

  /* ---- Space (4pt base) ------------------------------------------------- */
  --s-0:0;   --s-1:2px;  --s-2:4px;  --s-3:6px;  --s-4:8px;  --s-5:12px;
  --s-6:16px;--s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px;--s-11:48px;
  --s-12:64px;--s-13:80px;--s-14:104px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:26px;
  --r-3xl:34px; --r-full:999px;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-xs: 0 1px 2px hsl(var(--shadow-color) / .06);
  --sh-sm: 0 1px 3px hsl(var(--shadow-color) / .07), 0 1px 2px hsl(var(--shadow-color) / .04);
  --sh-md: 0 4px 12px hsl(var(--shadow-color) / .08), 0 1px 3px hsl(var(--shadow-color) / .05);
  --sh-lg: 0 12px 28px hsl(var(--shadow-color) / .10), 0 2px 6px hsl(var(--shadow-color) / .05);
  --sh-xl: 0 28px 60px hsl(var(--shadow-color) / .16), 0 6px 16px hsl(var(--shadow-color) / .07);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --sh-ring: 0 0 0 3px var(--ring);

  /* ---- Motion ----------------------------------------------------------- */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: 90ms; --dur-2: 150ms; --dur-3: 240ms; --dur-4: 380ms; --dur-5: 600ms;

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --tabbar-h: 62px;
  --content-max: 1400px;
  --reading-max: 68ch;

  /* ---- Z ---------------------------------------------------------------- */
  --z-base:0; --z-sticky:100; --z-drawer:200; --z-modal:300; --z-toast:400; --z-tip:500;
}

/* ---- Dark theme --------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg:            #0B0D0F;
  --bg-subtle:     #101316;
  --surface:       #15181B;
  --surface-2:     #1A1E22;
  --surface-3:     #212629;
  --surface-inv:   #F3F5F4;
  --overlay:       rgba(0,0,0,.62);

  --text:          #EDF0EF;
  --text-2:        #A6B0B4;
  --text-3:        #8A9498;
  --text-4:        #6B7478;
  --text-inv:      #0B0D0F;
  --text-brand:    var(--emerald-300);

  --border:        #262B2F;
  --border-2:      #3A424A;   /* raised for the same reason as light */
  --border-strong: #566069;
  --ring:          var(--emerald-300);

  /* Status hues are lightened for dark surfaces: the light-theme 500s measured
     3.39:1 (err), 3.16:1 (info) and 4.12:1 (ok) as text here — all below AA. */
  --ok-text:   #5FD98A;
  --warn-text: #F0B45C;
  --err-text:  #FF8A8A;
  --info-text: #7FB2F5;

  --primary:       var(--emerald-500);
  --primary-hover: var(--emerald-400);
  --primary-soft:  color-mix(in srgb, var(--emerald-500) 16%, transparent);
  --primary-text:  #FFFFFF;

  --accent:        var(--gold-400);
  --accent-hover:  var(--gold-300);
  --accent-soft:   color-mix(in srgb, var(--gold-400) 14%, transparent);
  --accent-text:   #16130A;

  --ok-50:  color-mix(in srgb, var(--ok-500) 15%, transparent);
  --warn-50:color-mix(in srgb, var(--warn-500) 15%, transparent);
  --err-50: color-mix(in srgb, var(--err-500) 15%, transparent);
  --info-50:color-mix(in srgb, var(--info-500) 15%, transparent);
  --ok-100: color-mix(in srgb, var(--ok-500) 30%, transparent);
  --warn-100:color-mix(in srgb, var(--warn-500) 30%, transparent);
  --err-100:color-mix(in srgb, var(--err-500) 30%, transparent);
  --info-100:color-mix(in srgb, var(--info-500) 30%, transparent);

  --shadow-color: 220 40% 2%;
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; --dur-4:0ms; --dur-5:0ms; }
}