/* ============================================================
   Sorin Design System — Tokens
   Dark-first. Black canvas. Green brand. Satoshi type.
   ============================================================ */

/* ---------- Web fonts ---------- */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ============================================================
   :root — primitive tokens
   ============================================================ */
:root {
  /* ---------- Brand ---------- */
  --sorin-green:           #20CA8B;   /* rgb(32,202,139)  — primary accent / bullish */
  --sorin-green-bright:    #28FCAE;   /* rgb(40,252,174)  — accent top, highlights */
  --sorin-green-tint:      rgba(40,252,174,0.20);  /* green CTA background */
  --sorin-green-faint:     rgba(32,202,139,0.08);
  --sorin-green-glow:      rgba(32,202,139,0.42);  /* hero radial */
  --sorin-yellow:          #FFBD4C;   /* semantic alert / signal amber */
  --sorin-yellow-glow:     rgba(255,189,76,0.20);
  --sorin-lime-glow:       #F7FF98;   /* marketing-only radial glow (cover slides) */

  /* ---------- Neutrals (greyscale) ---------- */
  --c-bg:                  #000000;   /* canvas */
  --c-surface-1:           #111112;   /* rgb(17,17,18)  — cards, composer */
  --c-surface-2:           #1E1E1F;   /* rgb(30,30,31)  — buttons, sidebar items */
  --c-surface-3:           #252627;   /* rgb(37,38,39)  — upper highlight grad */
  --c-surface-4:           #2D2D2F;   /* rgb(45,45,47)  — hairline + dividers */
  --c-surface-5:           #2E2F33;   /* rgb(46,47,51)  — stroke inner */
  --c-surface-6:           #36393A;   /* rgb(54,57,58)  — raised pill */

  --c-line-faint:          #1E1E1F;   /* default border */
  --c-line:                #2D2D2F;   /* contrast border */
  --c-line-strong:         #474B4D;   /* rgb(71,75,77)  — prominent divider */

  /* ---------- Text ---------- */
  --c-fg:                  #F8F8F8;   /* rgb(248,248,248) — primary text */
  --c-fg-strong:           #FFFFFF;   /* pure white — hero display */
  --c-fg-muted:            #747580;   /* rgb(116,117,128) — placeholder / secondary */
  --c-fg-muted-2:          #9899A6;   /* rgb(152,153,166) — tertiary / captions */
  --c-fg-dim:              #A3A3A3;   /* rgb(163,163,163) — dimmest still-readable */
  --c-fg-inverse:          #111112;

  /* ---------- Semantic ---------- */
  --c-success:             #20CA8B;   /* bullish / positive */
  --c-success-bg:          rgba(32,202,139,0.15);
  --c-danger:              #DF1C41;   /* bearish / sell */
  --c-danger-bg:           rgba(223,28,65,0.15);
  --c-warning:             #F7FF98;
  --c-info:                #7B8BFF;

  /* ---------- Typography ---------- */
  --font-sans:       'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-geo:        'Manrope', 'Satoshi', -apple-system, sans-serif;          /* tabular / numeric */
  --font-meta:       'Inter', -apple-system, sans-serif;                        /* tiny labels */
  --font-display:    'Space Grotesk', 'PolySans', 'Satoshi', -apple-system, sans-serif; /* slide headlines */
  --font-mono:       'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-cjk:        -apple-system, 'PingFang TC', 'PingFang SC', 'Noto Sans CJK TC', sans-serif;

  /* Scale — from Figma usage */
  --fs-10:           10px;
  --fs-11:           11px;
  --fs-12:           12px;   /* meta, captions, chips */
  --fs-14:           14px;   /* body small, most labels */
  --fs-16:           16px;   /* body, composer, list items */
  --fs-18:           18px;
  --fs-20:           20px;   /* sidebar wordmark */
  --fs-24:           24px;
  --fs-32:           32px;
  --fs-36:           36px;   /* hero greeting */
  --fs-48:           48px;
  --fs-56:           56px;   /* slide display */
  --fs-72:           72px;
  --fs-90:           90px;   /* full slide headline */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Line-heights */
  --lh-tight:   1.0;
  --lh-snug:    1.125;   /* 28/16 ish */
  --lh-normal:  1.4;
  --lh-body:    1.5;

  /* Letter-spacing (from Figma) */
  --ls-display: -0.04em;
  --ls-hero:    -0.06em;   /* wordmark 200px+ */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;    /* UPPER-CASE eyebrows */

  /* ---------- Radii ---------- */
  --r-none:  0;
  --r-xs:    6px;     /* tiny chips (Copy/Retry) */
  --r-sm:    8px;     /* menu items, small btns */
  --r-md:    12px;    /* inputs, icon tiles, graph previews */
  --r-lg:    16px;    /* cards */
  --r-xl:    20px;    /* banners */
  --r-2xl:   24px;    /* composer */
  --r-pill:  99px;    /* capsules */
  --r-app:   35.75px; /* app icon corner */

  /* ---------- Spacing (8-pt) ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-15:  60px;
  --s-20:  80px;
  --s-25:  100px;

  /* ---------- Shadow / Elevation ---------- */
  --shadow-glow-green:   0 0 0 1px rgba(40,252,174,0.10), 0 0 32px rgba(32,202,139,0.25);
  --shadow-glow-yellow:  0 0 60px rgba(247,255,152,0.25);
  --shadow-emboss:       0 1px 1px rgba(0,0,0,0.25);
  --shadow-raise-sm:     0 1px 2px rgba(0,0,0,0.5);
  --shadow-raise-md:     0 8px 24px rgba(0,0,0,0.5);
  --shadow-ring-focus:   0 0 0 1px #28FCAE inset, 0 0 0 2px rgba(40,252,174,0.2);

  /* ---------- Motion ---------- */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --ease-out:   cubic-bezier(0.2, 0, 0, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Layout ---------- */
  --w-sidebar:    280px;
  --h-topbar:     70px;
  --w-composer:   868px;
  --w-content:    1160px;
}

/* ============================================================
   Semantic styles — tag-level defaults
   ============================================================ */
html, body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-36);
  line-height: 40px;
  letter-spacing: var(--ls-display);
  color: var(--c-fg-strong);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: 32px;
  letter-spacing: var(--ls-tight);
  color: var(--c-fg-strong);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  line-height: 26px;
  color: var(--c-fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: 24px;
  color: var(--c-fg);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 18px;
  color: var(--c-fg);
  margin: 0;
}

.body-lg {
  font-size: var(--fs-16);
  line-height: 28px;
}

.caption, small {
  font-family: var(--font-meta);
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--c-fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-fg-muted-2);
}

.slide-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-90);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  color: var(--c-fg-strong);
}

.numeric {
  font-family: var(--font-geo);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

code, pre, kbd, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}

a {
  color: var(--sorin-green);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.85; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line-faint);
  margin: 0;
}

::selection {
  background: var(--sorin-green);
  color: var(--c-bg);
}

/* ============================================================
   Utility: the signature chat-composer radial spotlight
   ============================================================ */
.sorin-spotlight-green {
  background:
    radial-gradient(570px 570px at top right, var(--sorin-green-glow), transparent 70%),
    var(--c-bg);
}
.sorin-spotlight-yellow {
  background:
    radial-gradient(800px 800px at center, var(--sorin-yellow-glow), transparent 70%),
    var(--c-bg);
}