/* ==========================================================================
   SPEAR Design System — Colors & Type
   Recreated from the "SPEAR Design System.fig" Figma file.
   Fonts: Figtree (UI/body/accent), Poppins (display/brand)
   ========================================================================== */

/* Figtree shipped locally as variable TTFs. Poppins is still Google Fonts (not uploaded). */
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* ---------- PRIMITIVE COLORS ---------- */
  /* Blue (Primary) */
  --blue-50:  #E6F1FC;
  --blue-100: #CCE4FF;
  --blue-200: #AED4FC;
  --blue-300: #579BFC;
  --blue-400: #1F76C2;
  --blue-500: #0073EA;  /* primary */
  --blue-600: #0060B9;  /* hover */
  --blue-700: #004A91;
  --blue-surface: #F0F7FF;

  /* Grey / Neutral */
  --grey-0:   #FFFFFF;
  --grey-25:  #FAFBFC;
  --grey-50:  #F6F7FB;   /* allgrey background */
  --grey-100: #ECEDF5;   /* disabled bg */
  --grey-150: #E7E9EF;   /* ui background */
  --grey-200: #DDE3EE;
  --grey-300: #D0D4E4;   /* layout border */
  --grey-400: #C3C6D4;   /* ui border */
  --grey-500: #676879;   /* placeholder / icon / secondary text */
  --grey-600: #676D79;
  --grey-700: #323338;   /* primary text */
  --grey-800: #1E2026;
  --grey-900: #181B34;   /* dark panel / poster bg */
  --grey-1000: #111111;  /* fixed-dark */

  /* Positive / Green */
  --green-surface: #E6F4EE;
  --green-300: #B5CEC0;
  --green-500: #00854D;
  --green-600: #007038;

  /* Negative / Red */
  --red-surface: #FDECEF;
  --red-200:    #F4C3CB;
  --red-300:    #ECB7BF;
  --red-500:    #D83A52;
  --red-600:    #B63546;

  /* Warning / Yellow */
  --yellow-surface: #FEF5D1;
  --yellow-300:     #FCEBA1;

  /* Accent / Purple */
  --purple-500: #9747FF;

  /* Link */
  --link-color: #1F76C2;

  /* ---------- SEMANTIC TOKENS ---------- */
  --primary-color:                 var(--blue-500);
  --primary-hover-color:           var(--blue-600);
  --primary-selected-color:        var(--blue-surface);
  --primary-selected-hover-color:  #E0EEFD;
  --primary-highlighted-color:     #CCE4FF;

  --primary-text-color:            var(--grey-700);
  --secondary-text-color:          var(--grey-500);
  --text-color-on-inverted:        var(--grey-0);
  --text-color-on-primary:         var(--grey-0);
  --disabled-text-color:           rgba(50,51,56,0.38);

  --primary-background-color:      var(--grey-0);
  --primary-background-hover:      var(--grey-50);
  --secondary-background-color:    var(--grey-0);
  --allgrey-background-color:      var(--grey-50);
  --ui-background-color:           var(--grey-150);
  --disabled-background-color:     var(--grey-100);
  --primary-surface-color:         var(--blue-surface);
  --inverted-color-background:     var(--grey-700);

  --ui-border-color:               var(--grey-400);
  --layout-border-color:           var(--grey-300);
  --placeholder-color:             var(--grey-500);
  --icon-color:                    var(--grey-500);

  --positive-color:                var(--green-500);
  --positive-color-hover:          var(--green-600);
  --positive-color-selected:       var(--green-300);
  --positive-color-surface:        var(--green-surface);

  --negative-color:                var(--red-500);
  --negative-color-hover:          var(--red-600);
  --negative-color-selected:       var(--red-200);
  --negative-color-surface:        var(--red-surface);

  --warning-color-surface:         var(--yellow-surface);

  --fixed-dark-color:              var(--grey-1000);
  --fixed-light-color:             var(--grey-0);

  /* ---------- TYPE ---------- */
  --font-ui:        'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:   'Poppins', 'Figtree', system-ui, sans-serif;
  --font-accent:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Heading scale (Poppins) */
  --h0-size: 72px;   --h0-weight: 600;  --h0-lh: 1.05;
  --h1-size: 48px;   --h1-weight: 600;  --h1-lh: 1.1;
  --h2-size: 40px;   --h2-weight: 300;  --h2-lh: 1;   /* Page header light */
  --h3-size: 32px;   --h3-weight: 500;  --h3-lh: 1.2;
  --h4-size: 24px;   --h4-weight: 600;  --h4-lh: 1.3;
  --h5-size: 18px;   --h5-weight: 600;  --h5-lh: 1.4;

  /* Body scale (Figtree) */
  --text-lg-size: 16px; --text-lg-lh: 22px;
  --text-md-size: 14px; --text-md-lh: 20px;  /* default */
  --text-sm-size: 12px; --text-sm-lh: 16px;

  /* Spacing (Figma Spacing page: 4pt grid) */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-s:   12px;
  --sp-m:   16px;
  --sp-l:   24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-3xl: 64px;

  /* Radii (Border-radius page) */
  --radius-xs:    2px;
  --radius-s:     4px;   /* buttons, fields */
  --radius-m:     6px;
  --radius-l:     8px;   /* cards */
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* Elevation / shadows (approx from Elevation page) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.12);
  --shadow-s:  0 3px 6px rgba(0,0,0,0.12);
  --shadow-m:  0 6px 14px rgba(0,0,0,0.15);
  --shadow-l:  0 12px 32px rgba(0,0,0,0.2);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.17, 0.67, 0.3, 1.33);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  360ms;
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */
html, body {
  font-family: var(--font-ui);
  color: var(--primary-text-color);
  background: var(--primary-background-color);
  font-size: var(--text-md-size);
  line-height: var(--text-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sp-display-xl,
.sp-h0 { font-family: var(--font-display); font-size: var(--h0-size); font-weight: var(--h0-weight); line-height: var(--h0-lh); letter-spacing: -0.02em; color: var(--primary-text-color); margin: 0; }
.sp-h1 { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: -0.01em; color: var(--primary-text-color); margin: 0; }
.sp-h2,
.sp-page-header { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); color: var(--primary-text-color); margin: 0; }
.sp-h3 { font-family: var(--font-display); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); color: var(--primary-text-color); margin: 0; }
.sp-h4,
.sp-object-title { font-family: var(--font-display); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); color: var(--primary-text-color); margin: 0; }
.sp-h5 { font-family: var(--font-display); font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-lh); color: var(--primary-text-color); margin: 0; }

.sp-text-lg    { font-size: var(--text-lg-size); line-height: var(--text-lg-lh); }
.sp-text-md    { font-size: var(--text-md-size); line-height: var(--text-md-lh); }
.sp-text-sm    { font-size: var(--text-sm-size); line-height: var(--text-sm-lh); }
.sp-text-strong{ font-weight: 600; }
.sp-text-muted { color: var(--secondary-text-color); }
.sp-link       { color: var(--link-color); text-decoration: none; }
.sp-link:hover { text-decoration: underline; }
.sp-code       { font-family: var(--font-mono); font-size: 13px; background: var(--grey-50); padding: 2px 6px; border-radius: var(--radius-xs); border: 1px solid var(--layout-border-color); }