/* ============================================================
   Simple Design System — Core tokens
   Source: Figma "Simple Design System (Community)"
   ============================================================ */

/* ---- Fonts ------------------------------------------------- */
/* Inter and Roboto self-hosted from /fonts (variable TTFs).
   Roboto Mono is still pulled from Google Fonts — no local copy uploaded. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
}

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap");

:root {
  /* ==========================================================
     COLOR PRIMITIVES
     Neutral ramp — the system is near-monochrome by design.
     ========================================================== */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-150: #ececec;
  --neutral-200: #e3e3e3;
  --neutral-300: #d9d9d9;
  --neutral-400: #cdcdcd;
  --neutral-500: #b3b3b3;
  --neutral-600: #767676;
  --neutral-700: #757575;
  --neutral-800: #444444;
  --neutral-850: #303030;
  --neutral-900: #2c2c2c;
  --neutral-950: #1e1e1e;
  --neutral-1000: #000000;

  /* Brand accent — violet ramp (from /assets/logo-color.svg).
     Swap these values to rebrand the entire system. */
  --brand-50:  #f2e6ff;   /* fill */
  --brand-100: #e5ccff;
  --brand-300: #b163ff;   /* stroke */
  --brand-500: #7f00ff;   /* primary */
  --brand-700: #51158c;   /* text */
  --brand-900: #2b0057;

  /* Semantic families (fill / stroke / text) */
  --danger-50:  #fee9e7;
  --danger-300: #ec221f;
  --danger-500: #c00f0c;
  --danger-700: #900b09;

  --warning-50:  #fffbeb;
  --warning-100: #fff1c2;
  --warning-300: #bf6a02;
  --warning-700: #522504;

  --success-50:  #e6f4ea;
  --success-300: #2f9e44;
  --success-700: #15803d;

  /* ==========================================================
     SEMANTIC TOKENS — background
     ========================================================== */
  --bg-default:    var(--neutral-0);
  --bg-secondary:  var(--neutral-100);
  --bg-tertiary:   var(--neutral-300);
  --bg-hover:      var(--neutral-150);
  --bg-brand:      var(--neutral-900);       /* primary surface */
  --bg-brand-hover: var(--neutral-950);
  --bg-disabled:   var(--neutral-300);
  --bg-scrim:      rgba(0,0,0,0.5);
  --bg-blanket:    rgba(0,0,0,0.7);
  --bg-overlay:    rgba(255,255,255,0.8);

  --bg-brand-subtle:    var(--brand-50);
  --bg-danger-subtle:   var(--danger-50);
  --bg-warning-subtle:  var(--warning-50);
  --bg-success-subtle:  var(--success-50);

  /* ==========================================================
     SEMANTIC TOKENS — text / icon
     ========================================================== */
  --fg-default:    var(--neutral-950);       /* #1e1e1e */
  --fg-secondary:  var(--neutral-700);
  --fg-tertiary:   var(--neutral-500);
  --fg-disabled:   var(--neutral-400);
  --fg-on-brand:   var(--neutral-100);       /* text on dark button */
  --fg-on-danger:  var(--neutral-0);
  --fg-brand:      var(--brand-700);
  --fg-danger:     var(--danger-500);
  --fg-warning:    var(--warning-700);
  --fg-success:    var(--success-700);

  /* ==========================================================
     SEMANTIC TOKENS — border
     ========================================================== */
  --border-default:   var(--neutral-300);
  --border-secondary: var(--neutral-500);
  --border-tertiary:  var(--neutral-600);
  --border-brand:     var(--brand-300);
  --border-danger:    var(--danger-300);
  --border-warning:   var(--warning-300);
  --border-success:   var(--success-300);
  --border-disabled:  var(--neutral-300);

  /* ==========================================================
     SPACE SCALE (unified gap + padding, per system docs)
     ========================================================== */
  --space-100:  4px;
  --space-200:  8px;
  --space-300:  12px;
  --space-400:  16px;
  --space-500:  20px;
  --space-600:  24px;
  --space-800:  32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --space-4000: 160px;

  /* Negative space for pull-overlaps */
  --space-neg-100: -4px;
  --space-neg-200: -8px;

  /* ==========================================================
     RADIUS
     ========================================================== */
  --radius-small: 4px;
  --radius-base:  8px;
  --radius-large: 16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* ==========================================================
     SHADOW / ELEVATION
     ========================================================== */
  --shadow-100: 0 1px 2px 0 rgba(12,12,13,0.05);
  --shadow-200: 0 1px 2px 0 rgba(12,12,13,0.10), 0 1px 3px 0 rgba(12,12,13,0.05);
  --shadow-300: 0 2px 4px -1px rgba(12,12,13,0.10), 0 1px 2px 0 rgba(12,12,13,0.06);
  --shadow-400: 0 4px 8px -2px rgba(12,12,13,0.10), 0 2px 4px -1px rgba(12,12,13,0.06);
  --shadow-500: 0 8px 16px -4px rgba(12,12,13,0.10), 0 4px 6px -2px rgba(12,12,13,0.05);
  --shadow-600: 0 16px 32px -8px rgba(12,12,13,0.15), 0 8px 16px -4px rgba(12,12,13,0.08);

  --shadow-inner-100: inset 0 1px 2px 0 rgba(12,12,13,0.05);
  --shadow-inner-200: inset 0 1px 3px 0 rgba(12,12,13,0.10);
  --shadow-inner-300: inset 0 2px 4px 0 rgba(12,12,13,0.12);
  --shadow-inner-400: inset 0 2px 6px 0 rgba(12,12,13,0.16);
  --shadow-inner-500: inset 0 4px 8px 0 rgba(12,12,13,0.20);
  --shadow-inner-600: inset 0 4px 12px 0 rgba(12,12,13,0.24);

  /* Blur */
  --blur-layer:   4px;
  --blur-overlay: 8px;

  /* ==========================================================
     TYPOGRAPHY — families
     ========================================================== */
  --font-sans:   "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Whyte", "Inter", ui-sans-serif, system-ui, sans-serif; /* cover display only */

  /* ==========================================================
     TYPOGRAPHY — type scale
     Values straight from the Foundations > Typography frame.
     ========================================================== */
  --type-hero-size:    72px;
  --type-hero-line:    1.2;
  --type-hero-track:   -0.03em;
  --type-hero-weight:  700;

  --type-title-size:   48px;
  --type-title-line:   1.2;
  --type-title-track:  -0.025em;
  --type-title-weight: 700;

  --type-subtitle-size:   32px;
  --type-subtitle-line:   1.25;
  --type-subtitle-track:  -0.02em;
  --type-subtitle-weight: 500;

  --type-heading-size:    24px;
  --type-heading-line:    1.2;
  --type-heading-track:   -0.02em;
  --type-heading-weight:  700;

  --type-subheading-size:   20px;
  --type-subheading-line:   1.25;
  --type-subheading-track:  -0.015em;
  --type-subheading-weight: 400;

  --type-body-size:     16px;
  --type-body-line:     1.5;
  --type-body-weight:   400;

  --type-body-strong-weight:  600;   /* Semi Bold */
  --type-body-emphasis-style: italic;

  --type-body-sm-size:  14px;
  --type-body-sm-line:  1.4;

  --type-caption-size:  12px;
  --type-caption-line:  1.33;

  --type-code-size:     16px;
  --type-code-line:     1.4;
  --type-code-family:   var(--font-mono);

  --type-input-size:    16px;
  --type-input-line:    1;  /* single line */

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:    cubic-bezier(0, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Opt in with class "sds" on the root element, or inherit from body.
   ============================================================ */

.sds, .sds * {
  box-sizing: border-box;
}

.sds {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--fg-default);
  background: var(--bg-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

/* Type roles — apply as classes */
.sds h1, .sds .t-hero {
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-line);
  letter-spacing: var(--type-hero-track);
  font-weight: var(--type-hero-weight);
  margin: 0;
}
.sds h2, .sds .t-title {
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-track);
  font-weight: var(--type-title-weight);
  margin: 0;
}
.sds .t-subtitle {
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  letter-spacing: var(--type-subtitle-track);
  font-weight: var(--type-subtitle-weight);
  margin: 0;
}
.sds h3, .sds .t-heading {
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  letter-spacing: var(--type-heading-track);
  font-weight: var(--type-heading-weight);
  margin: 0;
}
.sds h4, .sds .t-subheading {
  font-size: var(--type-subheading-size);
  line-height: var(--type-subheading-line);
  letter-spacing: var(--type-subheading-track);
  font-weight: var(--type-subheading-weight);
  margin: 0;
}
.sds p, .sds .t-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  margin: 0;
}
.sds .t-body-strong   { font-weight: var(--type-body-strong-weight); }
.sds .t-body-emphasis { font-style: var(--type-body-emphasis-style); }
.sds .t-body-link     { color: var(--fg-default); text-decoration: underline; text-underline-offset: 2px; }
.sds .t-body-sm {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
}
.sds .t-caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}
.sds code, .sds .t-code {
  font-family: var(--type-code-family);
  font-size: var(--type-code-size);
  line-height: var(--type-code-line);
}
.sds input, .sds textarea, .sds select, .sds .t-input {
  font-family: var(--font-sans);
  font-size: var(--type-input-size);
  line-height: var(--type-input-line);
}

.sds a { color: inherit; }