/* =============================================================
   SELENIOR — Design System Tokens
   colors_and_type.css
   Premium B2B consulting brand. Editorial, institutional, calm.
   ============================================================= */

/* -- Webfonts ------------------------------------------------- */
/* Clash Display (display) = Selenior brand face. */
/* Manrope (body) + Instrument Serif (editorial flourish) + JetBrains Mono — Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Extralight.otf") format("opentype");
  font-weight: 100 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Bold.otf") format("opentype");
  font-weight: 700 900; font-style: normal; font-display: swap;
}

:root {
  /* -- Color: brand core ------------------------------------- */
  --se-ink:        #1A232B;   /* primary brand near-black, deep slate */
  --se-bone:       #EAECE0;   /* primary off-white, warm cream */
  --se-clay:       #6E5A51;   /* warm muted taupe / clay */
  --se-slate:      #375560;   /* desaturated teal slate, secondary */
  --se-navy:       #17395D;   /* deep editorial navy, accent */

  /* -- Color: ink tints (dark scale) ------------------------- */
  --se-ink-900:    #0F151A;
  --se-ink-800:    #141B22;
  --se-ink-700:    #1A232B;   /* = ink */
  --se-ink-600:    #243039;
  --se-ink-500:    #364450;
  --se-ink-400:    #54636F;
  --se-ink-300:    #7A8590;
  --se-ink-200:    #A4ADB6;
  --se-ink-100:    #C9CFD4;

  /* -- Color: bone tints (light scale) ----------------------- */
  --se-bone-50:    #F7F8F2;
  --se-bone-100:   #F1F2EA;
  --se-bone-200:   #EAECE0;   /* = bone */
  --se-bone-300:   #DFE1D3;
  --se-bone-400:   #C9CCBC;
  --se-bone-500:   #A8AB9A;

  /* -- Color: slate tints ------------------------------------ */
  --se-slate-700:  #1F343C;
  --se-slate-600:  #2A4651;
  --se-slate-500:  #375560;   /* = slate */
  --se-slate-400:  #4E6E7A;
  --se-slate-300:  #7C99A3;

  /* -- Color: clay tints ------------------------------------- */
  --se-clay-700:   #3F332D;
  --se-clay-600:   #574740;
  --se-clay-500:   #6E5A51;   /* = clay */
  --se-clay-400:   #8C766B;
  --se-clay-300:   #B09A8F;

  /* -- Color: navy tints ------------------------------------- */
  --se-navy-700:   #0E2438;
  --se-navy-600:   #112E4A;
  --se-navy-500:   #17395D;   /* = navy */
  --se-navy-400:   #2A5380;

  /* -- Semantic: surfaces ------------------------------------ */
  --bg-canvas:     var(--se-bone-50);  /* default light page */
  --bg-surface:    #FFFFFF;            /* card / sheet on light */
  --bg-sunken:     var(--se-bone-100); /* slight inset region */
  --bg-inverse:    var(--se-ink);      /* dark hero / product UI */
  --bg-inverse-2:  var(--se-ink-800);  /* dark sunken */
  --bg-inverse-3:  var(--se-ink-600);  /* dark elevated */

  /* -- Semantic: foreground / text --------------------------- */
  --fg-1:          var(--se-ink);        /* primary text on light */
  --fg-2:          var(--se-ink-500);    /* secondary, supportive */
  --fg-3:          var(--se-ink-400);    /* tertiary, captions */
  --fg-mute:       var(--se-ink-300);    /* mute, meta */
  --fg-on-dark-1:  var(--se-bone);       /* primary text on dark */
  --fg-on-dark-2:  rgba(234,236,224,.72);
  --fg-on-dark-3:  rgba(234,236,224,.50);
  --fg-accent:     var(--se-slate);
  --fg-accent-2:   var(--se-clay);

  /* -- Semantic: borders / dividers -------------------------- */
  --border-1:      rgba(26,35,43,.10);   /* hairline on light */
  --border-2:      rgba(26,35,43,.18);
  --border-strong: rgba(26,35,43,.42);
  --border-on-dark-1: rgba(234,236,224,.10);
  --border-on-dark-2: rgba(234,236,224,.18);

  /* -- Semantic: states (used sparingly, muted) -------------- */
  --state-success: #4E7B5B;   /* sage green, NOT neon */
  --state-warn:    #B08247;   /* dusty amber */
  --state-danger:  #9A4A45;   /* rust red */
  --state-info:    var(--se-slate);

  /* -- Typography: families ---------------------------------- */
  --font-display:  "Clash Display", "Sora", "Söhne", system-ui, sans-serif; /* the real Selenior wordmark face */
  --font-sans:     "Manrope", "Söhne", system-ui, sans-serif;   /* UI + body */
  --font-serif:    "Instrument Serif", "Tiempos", "Times New Roman", serif; /* editorial flourish */
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* -- Typography: tracking ---------------------------------- */
  --track-tight:   -0.02em;
  --track-snug:    -0.01em;
  --track-normal:  0;
  --track-wide:    0.04em;
  --track-eyebrow: 0.14em;   /* uppercase labels */

  /* -- Typography: leading ----------------------------------- */
  --lead-tight:    1.05;
  --lead-snug:     1.18;
  --lead-normal:   1.45;
  --lead-loose:    1.62;

  /* -- Spacing scale (4px base) ------------------------------ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* -- Radii (restrained) ------------------------------------ */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* -- Elevation (whispered shadows) ------------------------- */
  --shadow-1:  0 1px 2px rgba(15,21,26,.04), 0 1px 1px rgba(15,21,26,.03);
  --shadow-2:  0 2px 6px rgba(15,21,26,.05), 0 1px 2px rgba(15,21,26,.04);
  --shadow-3:  0 12px 32px -8px rgba(15,21,26,.10), 0 4px 10px rgba(15,21,26,.04);
  --shadow-4:  0 30px 60px -20px rgba(15,21,26,.18), 0 10px 24px -10px rgba(15,21,26,.08);
  --ring-focus: 0 0 0 3px rgba(55,85,96,.28);

  /* -- Motion ------------------------------------------------ */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-out:      cubic-bezier(.16,.84,.32,1);
  --ease-in:       cubic-bezier(.4,0,.7,.2);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* =============================================================
   Semantic type roles
   Use these CLASSES (or copy values into your own components).
   ============================================================= */

.se-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.se-display {
  font-family: var(--font-display);
  font-weight: 500;            /* Clash Display display weight */
  font-size: clamp(48px, 6vw, 88px);
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.se-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.se-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}

.se-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}

.se-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}

.se-serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.se-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lead-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.se-p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lead-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}

.se-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-2);
}

.se-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--fg-3);
}

.se-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--fg-2);
}

/* =============================================================
   Base reset hooks (opt-in via class on <body>)
   ============================================================= */
.se-body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.se-body--dark {
  background: var(--bg-inverse);
  color: var(--fg-on-dark-1);
}