/* ============================================================
   SteelFrame.Cloud — Design Tokens
   The single source of truth. Every project consumes these.
   ============================================================ */

:root {
  /* ---- Brand core ------------------------------------------ */
  --sf-navy:        #141F2C;   /* rgb(20,31,44)   primary surface  */
  --sf-steel:       #263A50;   /* rgb(38,58,80)   structural steel  */
  --sf-orange:      #E37446;   /* rgb(227,116,70) primary brand     */
  --sf-blue:        #6E9DEE;   /* rgb(110,157,238) secondary accent */
  --sf-cream:       #F3F0E9;   /* rgb(243,240,233) paper / on-dark  */
  --sf-mist:        #BDC8D3;   /* rgb(189,200,211) muted steel      */

  /* ---- Orange scale (primary action) ----------------------- */
  --sf-orange-50:   #FBEEE7;
  --sf-orange-100:  #F7DBCB;
  --sf-orange-200:  #F0BFA0;
  --sf-orange-300:  #ECA176;
  --sf-orange-400:  #E78858;
  --sf-orange-500:  #E37446;  /* base */
  --sf-orange-600:  #C95E33;
  --sf-orange-700:  #A54A28;
  --sf-orange-800:  #813A20;
  --sf-orange-900:  #632E1A;

  /* ---- Steel / neutral scale (cool navy) ------------------- */
  --sf-steel-25:    #F3F0E9;  /* cream paper */
  --sf-steel-50:    #E6E9EE;
  --sf-steel-100:   #CDD4DD;
  --sf-steel-200:   #BDC8D3;
  --sf-steel-300:   #9AA8B8;
  --sf-steel-400:   #6E8092;
  --sf-steel-500:   #4A6076;
  --sf-steel-600:   #324A63;
  --sf-steel-700:   #263A50;
  --sf-steel-800:   #1B2A3A;
  --sf-steel-900:   #141F2C;
  --sf-steel-950:   #0E1620;

  /* ---- Blue scale (info / secondary) ----------------------- */
  --sf-blue-300:    #A7C2F4;
  --sf-blue-400:    #8AAFF1;
  --sf-blue-500:    #6E9DEE;
  --sf-blue-600:    #4F7FD6;
  --sf-blue-700:    #3A63AE;

  /* ---- Semantic ------------------------------------------- */
  --sf-success:     #4CA574;
  --sf-success-bg:  rgba(76,165,116,0.14);
  --sf-warning:     #E0A03C;
  --sf-warning-bg:  rgba(224,160,60,0.14);
  --sf-danger:      #E05B4F;
  --sf-danger-bg:   rgba(224,91,79,0.14);
  --sf-info:        #6E9DEE;
  --sf-info-bg:     rgba(110,157,238,0.14);

  /* ---- Surfaces (dark-first) ------------------------------- */
  --sf-bg:              #0E1620;  /* app canvas, deepest */
  --sf-surface:         #141F2C;  /* primary surface     */
  --sf-surface-raised:  #1B2A3A;  /* cards               */
  --sf-surface-overlay: #233447;  /* menus, popovers     */
  --sf-surface-inset:   #0E1620;  /* wells, code blocks  */

  /* ---- Text ------------------------------------------------ */
  --sf-text:         #F3F0E9;  /* primary on dark   */
  --sf-text-muted:   #BDC8D3;  /* secondary         */
  --sf-text-subtle:  #7E8C9C;  /* tertiary / hints  */
  --sf-text-inverse: #141F2C;  /* on light / orange */
  --sf-text-brand:   #E37446;

  /* ---- Borders & dividers ---------------------------------- */
  --sf-border:        rgba(189,200,211,0.12);
  --sf-border-strong: rgba(189,200,211,0.22);
  --sf-border-brand:  rgba(227,116,70,0.45);
  --sf-focus-ring:    rgba(227,116,70,0.55);

  /* ---- Typography ------------------------------------------ */
  --sf-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sf-font-mono:    "Intel One Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sf-text-2xs:  11px;
  --sf-text-xs:   12px;
  --sf-text-sm:   14px;
  --sf-text-base: 16px;
  --sf-text-lg:   18px;
  --sf-text-xl:   22px;
  --sf-text-2xl:  28px;
  --sf-text-3xl:  36px;
  --sf-text-4xl:  48px;
  --sf-text-5xl:  64px;
  --sf-text-6xl:  88px;

  --sf-leading-tight:  1.05;
  --sf-leading-snug:   1.25;
  --sf-leading-normal: 1.5;
  --sf-leading-relax:  1.7;

  --sf-tracking-tight: -0.02em;
  --sf-tracking-snug:  -0.01em;
  --sf-tracking-wide:   0.04em;
  --sf-tracking-caps:   0.12em;

  /* ---- Spacing (4px base grid) ----------------------------- */
  --sf-space-1:  4px;
  --sf-space-2:  8px;
  --sf-space-3:  12px;
  --sf-space-4:  16px;
  --sf-space-5:  24px;
  --sf-space-6:  32px;
  --sf-space-7:  48px;
  --sf-space-8:  64px;
  --sf-space-9:  96px;
  --sf-space-10: 128px;

  /* ---- Radius --------------------------------------------- */
  --sf-radius-xs:   4px;
  --sf-radius-sm:   7px;   /* brand swatch radius */
  --sf-radius-md:   10px;
  --sf-radius-lg:   14px;
  --sf-radius-xl:   20px;
  --sf-radius-pill: 999px;

  /* ---- Elevation ------------------------------------------ */
  --sf-shadow-sm:  0 1px 2px rgba(7,12,18,0.40);
  --sf-shadow-md:  0 6px 18px rgba(7,12,18,0.45);
  --sf-shadow-lg:  0 18px 44px rgba(7,12,18,0.55);
  --sf-shadow-glow: 0 0 0 1px var(--sf-border-brand), 0 10px 30px rgba(227,116,70,0.22);

  /* ---- Motion --------------------------------------------- */
  --sf-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --sf-ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --sf-dur-fast:    120ms;
  --sf-dur-base:    220ms;
  --sf-dur-slow:    420ms;

  /* ---- Layout --------------------------------------------- */
  --sf-sidebar-w:   272px;
  --sf-content-max: 1080px;
}

/* ============================================================
   Light theme — the same tokens, re-pointed.
   Apply with  <html data-theme="light">  or on any subtree.
   Brand orange / blue / semantics stay constant across themes.
   ============================================================ */
[data-theme="light"] {
  --sf-bg:              #ECE9E1;  /* cream canvas        */
  --sf-surface:         #FBFAF6;  /* primary surface     */
  --sf-surface-raised:  #FFFFFF;  /* cards               */
  --sf-surface-overlay: #FFFFFF;  /* menus, popovers     */
  --sf-surface-inset:   #ECEAE2;  /* wells, code blocks  */

  --sf-text:         #141F2C;  /* primary on light  */
  --sf-text-muted:   #46596C;  /* secondary         */
  --sf-text-subtle:  #6E8092;  /* tertiary          */
  --sf-text-inverse: #F3F0E9;  /* on dark / orange  */
  --sf-text-brand:   #C95E33;  /* deeper for AA on cream */

  --sf-border:        rgba(20,31,44,0.10);
  --sf-border-strong: rgba(20,31,44,0.18);
  --sf-border-brand:  rgba(201,94,51,0.45);
  --sf-focus-ring:    rgba(201,94,51,0.45);

  --sf-success-bg:  rgba(76,165,116,0.16);
  --sf-warning-bg:  rgba(224,160,60,0.18);
  --sf-danger-bg:   rgba(224,91,79,0.14);
  --sf-info-bg:     rgba(110,157,238,0.16);

  --sf-shadow-sm:  0 1px 2px rgba(20,31,44,0.10);
  --sf-shadow-md:  0 6px 18px rgba(20,31,44,0.12);
  --sf-shadow-lg:  0 18px 44px rgba(20,31,44,0.16);
}