/* =============================================================
   magicplan design tokens
   Derived from packages/design-system/design_tokens/*.ts
   ============================================================= */

:root {
  /* ---------- Primitive: light gray (neutrals, light mode) ---------- */
  --lg-0:   rgba(255, 255, 255, 1);
  --lg-10:  rgba(254, 254, 254, 1);
  --lg-20:  rgba(252, 252, 252, 1);
  --lg-30:  rgba(251, 251, 251, 1);
  --lg-40:  rgba(249, 249, 249, 1);
  --lg-50:  rgba(248, 248, 248, 1);
  --lg-60:  rgba(247, 247, 247, 1);
  --lg-70:  rgba(245, 245, 245, 1);
  --lg-80:  rgba(243, 243, 243, 1);
  --lg-90:  rgba(242, 242, 242, 1);
  --lg-100: rgba(241, 241, 241, 1);
  --lg-200: rgba(229, 229, 229, 1);
  --lg-300: rgba(217, 217, 217, 1);
  --lg-400: rgba(205, 205, 205, 1);
  --lg-500: rgba(193, 193, 193, 1);
  --lg-600: rgba(181, 181, 181, 1);
  --lg-700: rgba(169, 169, 169, 1);
  --lg-800: rgba(157, 157, 157, 1);
  --lg-900: rgba(145, 145, 145, 1);

  /* ---------- Primitive: dark gray (foreground, dark mode) ---------- */
  --dg-0:   rgba(147, 147, 147, 1);
  --dg-10:  rgba(133, 133, 133, 1);
  --dg-20:  rgba(120, 120, 120, 1);
  --dg-30:  rgba(107, 107, 107, 1);
  --dg-40:  rgba(94, 94, 94, 1);
  --dg-50:  rgba(81, 81, 81, 1);
  --dg-60:  rgba(68, 68, 68, 1);
  --dg-70:  rgba(63, 63, 63, 1);
  --dg-80:  rgba(60, 60, 60, 1);
  --dg-90:  rgba(54, 54, 54, 1);
  --dg-100: rgba(49, 49, 49, 1);
  --dg-200: rgba(44, 44, 44, 1);
  --dg-300: rgba(39, 39, 39, 1);
  --dg-400: rgba(35, 35, 35, 1);
  --dg-500: rgba(30, 30, 30, 1);
  --dg-600: rgba(25, 25, 25, 1);
  --dg-700: rgba(20, 20, 20, 1);
  --dg-800: rgba(16, 16, 16, 1);
  --dg-900: rgba(11, 11, 11, 1);

  /* ---------- Primitive: hue scales ---------- */
  --blue-50:  rgba(230, 244, 254, 1);
  --blue-100: rgba(176, 220, 250, 1);
  --blue-200: rgba(138, 203, 248, 1);
  --blue-300: rgba(84, 179, 245, 1);
  --blue-400: rgba(51, 164, 243, 1);
  --blue-500: rgba(0, 141, 240, 1);
  --blue-600: rgba(0, 128, 218, 1);
  --blue-700: rgba(0, 100, 170, 1);
  --blue-800: rgba(0, 78, 132, 1);
  --blue-900: rgba(0, 59, 101, 1);

  --red-50:  rgba(255, 235, 234, 1);
  --red-100: rgba(255, 194, 191, 1);
  --red-200: rgba(255, 165, 160, 1);
  --red-300: rgba(255, 124, 116, 1);
  --red-400: rgba(255, 98, 89, 1);
  --red-500: rgba(255, 59, 48, 1);
  --red-600: rgba(232, 54, 44, 1);
  --red-700: rgba(181, 42, 34, 1);
  --red-800: rgba(140, 32, 26, 1);
  --red-900: rgba(107, 25, 20, 1);

  --green-50:  rgba(235, 249, 238, 1);
  --green-100: rgba(245, 201, 192, 1);
  --green-200: rgba(162, 229, 179, 1);
  --green-300: rgba(119, 217, 144, 1);
  --green-400: rgba(93, 210, 122, 1);
  --green-500: rgba(52, 199, 89, 1);
  --green-600: rgba(47, 181, 81, 1);
  --green-700: rgba(37, 141, 63, 1);
  --green-800: rgba(29, 109, 49, 1);
  --green-900: rgba(22, 84, 37, 1);

  --orange-50:  rgba(255, 244, 230, 1);
  --orange-100: rgba(255, 222, 176, 1);
  --orange-200: rgba(255, 206, 138, 1);
  --orange-300: rgba(255, 184, 84, 1);
  --orange-400: rgba(255, 170, 51, 1);
  --orange-500: rgba(255, 149, 0, 1);
  --orange-600: rgba(232, 136, 0, 1);
  --orange-700: rgba(181, 106, 0, 1);
  --orange-800: rgba(140, 82, 0, 1);
  --orange-900: rgba(107, 63, 0, 1);

  --yellow-50:  rgba(255, 250, 230, 1);
  --yellow-100: rgba(255, 239, 176, 1);
  --yellow-200: rgba(255, 232, 138, 1);
  --yellow-300: rgba(255, 221, 84, 1);
  --yellow-400: rgba(255, 214, 51, 1);
  --yellow-500: rgba(255, 204, 0, 1);
  --yellow-600: rgba(232, 186, 0, 1);
  --yellow-700: rgba(181, 145, 0, 1);
  --yellow-800: rgba(140, 112, 0, 1);
  --yellow-900: rgba(56, 45, 0, 1);

  /* ---------- Brand ---------- */
  --brand-blue: #0099EE;          /* magicplan "m" mark */
  --brand-black: #161616;         /* magicplan wordmark */

  /* ---------- Semantic: neutral / background ---------- */
  --c-bg-container:         var(--lg-10);
  --c-bg-canvas:            var(--lg-100);
  --c-bg-container-2:       var(--lg-60);
  --c-bg-container-3:       var(--lg-80);
  --c-bg-disabled:          rgba(128, 128, 128, 0.08);

  /* foreground */
  --c-fg-default:           var(--dg-300);
  --c-fg-secondary:         rgba(60, 60, 60, 0.6);
  --c-fg-tertiary:          rgba(60, 60, 60, 0.3);
  --c-fg-disabled:          var(--lg-700);

  /* borders */
  --c-border-default:       var(--lg-200);
  --c-border-thick:         var(--lg-300);
  --c-border-light:         var(--lg-100);
  --c-border-lighter:       var(--lg-90);

  /* ---------- Semantic: interactive (blue / primary) ---------- */
  --c-int-bg-subdued:         var(--blue-50);
  --c-int-bg-emphasis:        var(--blue-500);
  --c-int-bg-emphasis-hover:  var(--blue-600);
  --c-int-bg-emphasis-press:  var(--blue-600);
  --c-int-fg-default:         var(--blue-500);
  --c-int-fg-on-subdued:      var(--blue-800);
  --c-int-fg-on-emphasis:     var(--lg-10);
  --c-int-border-subdued:     var(--blue-200);
  --c-int-border-emphasis:    var(--blue-600);

  /* critical / red */
  --c-crit-bg-subdued:        var(--red-50);
  --c-crit-bg-emphasis:       var(--red-500);
  --c-crit-fg-default:        var(--red-500);
  --c-crit-fg-on-subdued:     var(--red-800);
  --c-crit-fg-on-emphasis:    var(--lg-10);
  --c-crit-border-subdued:    var(--red-200);

  /* success / green */
  --c-suc-bg-subdued:         var(--green-50);
  --c-suc-bg-emphasis:        var(--green-500);
  --c-suc-fg-default:         var(--green-500);
  --c-suc-fg-on-subdued:      var(--green-800);
  --c-suc-fg-on-emphasis:     var(--lg-10);
  --c-suc-border-subdued:     var(--green-200);

  /* caution / orange */
  --c-cau-bg-subdued:         var(--orange-50);
  --c-cau-bg-emphasis:        var(--orange-500);
  --c-cau-fg-default:         var(--orange-500);
  --c-cau-fg-on-subdued:      var(--orange-800);
  --c-cau-fg-on-emphasis:     var(--lg-10);
  --c-cau-border-subdued:     var(--orange-200);

  /* tip / yellow */
  --c-tip-bg-subdued:         var(--yellow-50);
  --c-tip-bg-emphasis:        var(--yellow-500);
  --c-tip-fg-on-subdued:      var(--yellow-800);

  /* inverse surfaces (dark toolbars, sheets) */
  --c-inv-bg:                 var(--dg-300);
  --c-inv-bg-hover:           var(--dg-60);
  --c-inv-bg-press:           var(--dg-80);
  --c-inv-fg:                 rgba(254, 254, 254, 0.9);
  --c-inv-fg-secondary:       rgba(235, 235, 235, 0.6);
  --c-inv-fg-tertiary:        rgba(235, 235, 235, 0.3);
  --c-inv-border:             var(--dg-90);

  /* editor surfaces (plan canvas) */
  --c-editor-bg:              var(--lg-100);
  --c-editor-bg-3d:           var(--lg-400);
  --c-editor-grid-thick:      rgba(247, 220, 198, 1);
  --c-editor-grid-light:      rgba(239, 232, 227, 1);
  --c-editor-partial-bg:      rgba(177, 140, 254, 0.18);
  --c-editor-partial-border:  rgba(177, 140, 254, 0.7);

  /* translucent overlays */
  --c-overlay-light:          rgba(128, 128, 128, 0.08);
  --c-overlay-med:            rgba(12, 12, 12, 0.12);
  --c-overlay-thick:          rgba(12, 12, 12, 0.16);

  /* tags */
  --c-tag-bg-red: #F7D9D5;    --c-tag-fg-red: #6D3531;
  --c-tag-bg-orange: #F3DDCB; --c-tag-fg-orange: #6A4222;
  --c-tag-bg-yellow: #F2E3B7; --c-tag-fg-yellow: #655121;
  --c-tag-bg-green:  #D7E6DD; --c-tag-fg-green:  #225338;
  --c-tag-bg-blue:   #CBE3F7; --c-tag-fg-blue:   #264A72;
  --c-tag-bg-purple: #E8DBF2; --c-tag-fg-purple: #553B69;
  --c-tag-bg-clear:  #E7E6E6; --c-tag-fg-clear:  #4E4D4D;

  /* ---------- Spacing (base 2) ---------- */
  --s-none: 0;
  --s-xs3:  2px;
  --s-xs2:  4px;
  --s-xs:   8px;
  --s-sm:   10px;
  --s-sm2:  12px;
  --s-md:   16px;
  --s-lg:   24px;
  --s-xl:   32px;
  --s-xl2:  40px;
  --s-xl3:  48px;
  --s-xl4:  64px;

  /* ---------- Radius ---------- */
  --r-none:     0;
  --r-xs:       2px;
  --r-sm:       4px;
  --r-md:       8px;
  --r-lg:       10px;
  --r-xl:       12px;
  --r-infinity: 9999px;

  /* ---------- Border width ---------- */
  --bw-thin:    1px;
  --bw-regular: 2px;
  --bw-medium:  3px;
  --bw-thick:   4px;
  --bw-huge:    5px;

  /* ---------- Typography ---------- */
  --font-sans: 'Inter Tight', 'Inter Tight Static', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-display: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* type ramp — size / line-height pairs (px) */
  --t-display-size:     40px;  --t-display-lh:    48px;  /* display */
  --t-largeTitle-size:  32px;  --t-largeTitle-lh: 40px;  /* largeTitle */
  --t-title1-size:      28px;  --t-title1-lh:     32px;  /* title1 */
  --t-title2-size:      24px;  --t-title2-lh:     28px;  /* title2 */
  --t-title3-size:      20px;  --t-title3-lh:     24px;  /* title3 */
  --t-body-size:        16px;  --t-body-lh:       20px;  /* body & headline */
  --t-subHeadline-size: 14px;  --t-subHeadline-lh:20px;  /* subheadline */
  --t-footnote-size:    12px;  --t-footnote-lh:   16px;  /* footnote */
  --t-caption-size:     10px;  --t-caption-lh:    12px;  /* caption */

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

  /* ---------- Shadows (RN Restyle → web) ---------- */
  --sh-card:           0 1px 2px rgba(0,0,0,0.15);
  --sh-button:         0 1px 0 rgba(0,0,0,0.05);
  --sh-icon-button:    0 1px 4px rgba(0,0,0,0.38);
  --sh-popover:        0 8px 20px rgba(23,24,24,0.12);
  --sh-tile:           0 2px 4px rgba(0,0,0,0.05);
  --sh-deep:           0 2px 16px rgba(33,43,54,0.08);
  --sh-floating:       0 8px 20px rgba(23,24,24,0.22);
  --sh-modal:          0 26px 80px rgba(0,0,0,0.20);
  --sh-base-thick:     0 1px 3px rgba(63,63,68,0.15);
  --sh-base-light:     0 0 3px rgba(63,63,68,0.06);
  --sh-bottom-sheet:   0 -2px 12px rgba(0,0,0,0.15);
  --sh-disclosure-top: 0 -1px 3px rgba(63,63,68,0.20);
}

/* =============================================================
   Utility text classes — match fontLight variants 1:1
   ============================================================= */
.t-display             { font: var(--fw-medium)   var(--t-display-size)/var(--t-display-lh)        var(--font-sans); }
.t-display-emphasized  { font: var(--fw-bold)     var(--t-display-size)/var(--t-display-lh)        var(--font-sans); }
.t-largeTitle          { font: var(--fw-regular)  var(--t-largeTitle-size)/var(--t-largeTitle-lh)  var(--font-sans); }
.t-largeTitle-emphasized { font: var(--fw-bold)   var(--t-largeTitle-size)/var(--t-largeTitle-lh)  var(--font-sans); }
.t-title1              { font: var(--fw-regular)  var(--t-title1-size)/var(--t-title1-lh)          var(--font-sans); }
.t-title1-emphasized   { font: var(--fw-bold)     var(--t-title1-size)/var(--t-title1-lh)          var(--font-sans); }
.t-title2              { font: var(--fw-regular)  var(--t-title2-size)/var(--t-title2-lh)          var(--font-sans); }
.t-title2-emphasized   { font: var(--fw-bold)     var(--t-title2-size)/var(--t-title2-lh)          var(--font-sans); }
.t-title3              { font: var(--fw-regular)  var(--t-title3-size)/var(--t-title3-lh)          var(--font-sans); }
.t-title3-emphasized   { font: var(--fw-bold)     var(--t-title3-size)/var(--t-title3-lh)          var(--font-sans); }
.t-headline            { font: var(--fw-bold)     var(--t-body-size)/var(--t-body-lh)              var(--font-sans); }
.t-body                { font: var(--fw-regular)  var(--t-body-size)/var(--t-body-lh)              var(--font-sans); }
.t-body-emphasized     { font: var(--fw-semibold) var(--t-body-size)/var(--t-body-lh)              var(--font-sans); }
.t-subHeadline         { font: var(--fw-regular)  var(--t-subHeadline-size)/var(--t-subHeadline-lh) var(--font-sans); }
.t-subHeadline-emphasized { font: var(--fw-semibold) var(--t-subHeadline-size)/var(--t-subHeadline-lh) var(--font-sans); }
.t-footnote            { font: var(--fw-regular)  var(--t-footnote-size)/var(--t-footnote-lh)      var(--font-sans); }
.t-footnote-emphasized { font: var(--fw-semibold) var(--t-footnote-size)/var(--t-footnote-lh)      var(--font-sans); }
.t-caption             { font: var(--fw-regular)  var(--t-caption-size)/var(--t-caption-lh)        var(--font-sans); }
.t-caption-emphasized  { font: var(--fw-semibold) var(--t-caption-size)/var(--t-caption-lh)        var(--font-sans); }
.t-mono                { font: var(--fw-regular)  var(--t-body-size)/var(--t-body-lh)              var(--font-mono); }

/* =============================================================
   Baseline reset & page defaults
   ============================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg-canvas);
  color: var(--c-fg-default);
  font: var(--fw-regular) var(--t-body-size)/var(--t-body-lh) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--c-int-fg-default); text-decoration: none; }
a:hover { text-decoration: underline; }