/* =============================================================
   OmegaCloud — Core Design Tokens
   Colors + Typography for the marketing surface and UI kit.
   Import this file first; every other stylesheet builds on it.
   ============================================================= */

/* ---------- Fonts ----------
   Corbel is the OmegaCloud brand face (body + display).
   JetBrains Mono is retained for code / infra identifiers only —
   Corbel has no matching monospace. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Corbel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Corbel'), url('fonts/CORBEL.TTF') format('truetype');
}
@font-face {
  font-family: 'Corbel';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Corbel Italic'), local('Corbel'), url('fonts/Corbel_Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Corbel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Corbel Bold'), local('Corbel'), url('fonts/CORBELB.TTF') format('truetype');
}
@font-face {
  font-family: 'Corbel';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Corbel Bold Italic'), local('Corbel'), url('fonts/Corbel_Bold_Italic.ttf') format('truetype');
}

:root {
  /* =========================================================
     COLOR — derived from the Omega swirl gradient
     Dark teal (srgb 0.067,0.153,0.196) → mid teal (srgb 0.149,0.396,0.549)
     → light teal (srgb 0.451,0.694,0.749).
     ========================================================= */

  /* Teal ramp — the brand spine */
  --teal-950: #0f1f27;  /* deepest, backgrounds in dark mode */
  --teal-900: #112831;  /* swirl bottom */
  --teal-800: #15323f;
  --teal-700: #1c4457;
  --teal-600: #26647d;  /* swirl mid */
  --teal-500: #3d8aa5;  /* interactive / primary */
  --teal-400: #73b1c0;  /* swirl top, hover */
  --teal-300: #a5cdd7;
  --teal-200: #cde3e9;
  --teal-100: #e6f1f4;
  --teal-50:  #f3f8fa;

  /* Neutrals — warm-cool grey, slightly blue-tinted */
  --ink-950: #0a0f12;
  --ink-900: #13191d;
  --ink-800: #1d252b;
  --ink-700: #2a343c;
  --ink-600: #455561;
  --ink-500: #627482;
  --ink-400: #8798a4;
  --ink-300: #b5c1cb;
  --ink-200: #d8dfe5;
  --ink-100: #eaeff2;
  --ink-50:  #f5f7f9;
  --ink-0:   #ffffff;

  /* Signal colors — from Pulse's severity system */
  --signal-ok:        #2a9d5f;  /* green / healthy */
  --signal-info:      #3d8aa5;  /* teal / informational */
  --signal-warn:      #e3a008;  /* amber / warning */
  --signal-alert:     #d97706;  /* orange / average */
  --signal-critical:  #c93838;  /* red / high */
  --signal-disaster:  #0a0f12;  /* near-black / disaster */

  /* =========================================================
     SEMANTIC TOKENS — light mode (default)
     ========================================================= */
  --bg:           var(--ink-0);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-inverse:   var(--teal-950);
  --bg-brand:     var(--teal-900);    /* deep hero backgrounds */

  --fg:           var(--ink-900);     /* body text */
  --fg-muted:     var(--ink-600);     /* secondary text */
  --fg-subtle:    var(--ink-500);     /* tertiary / captions */
  --fg-inverse:   var(--ink-0);
  --fg-brand:     var(--teal-600);    /* links, inline brand */

  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --border-brand: var(--teal-500);

  --accent:       var(--teal-600);    /* primary brand accent */
  --accent-hover: var(--teal-700);
  --accent-press: var(--teal-800);
  --on-accent:    var(--ink-0);

  /* Elevation — soft, long shadows; the brand is serious/civic,
     not playful. Never use colored shadows. */
  --shadow-xs: 0 1px 2px rgba(15, 31, 39, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 31, 39, 0.07), 0 1px 2px rgba(15, 31, 39, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 31, 39, 0.09), 0 2px 6px rgba(15, 31, 39, 0.05);
  --shadow-lg: 0 24px 48px rgba(15, 31, 39, 0.14), 0 6px 12px rgba(15, 31, 39, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(15, 31, 39, 0.06);

  /* Corner radii — restrained, infrastructure-grade. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Spacing scale — 4px base, multiplicative. */
  --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-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Motion — quick, confident, never bouncy. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --t-fast:     120ms; /* @kind other */
  --t-med:      220ms; /* @kind other */
  --t-slow:     400ms; /* @kind other */

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-sans: 'Corbel', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text',
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  /* Type scale — modular (1.25 major third), display has a kick. */
  --fs-display: clamp(3.25rem, 1.5rem + 4.5vw, 5.5rem);   /* @kind other */ /* 52–88px */
  --fs-h1:      clamp(2.25rem, 1.25rem + 2.5vw, 3.25rem); /* @kind other */ /* 36–52px */
  --fs-h2:      clamp(1.75rem, 1.1rem + 1.6vw, 2.25rem);  /* @kind other */ /* 28–36px */
  --fs-h3:      1.5rem;    /* @kind other */ /* 24 */
  --fs-h4:      1.25rem;   /* @kind other */ /* 20 */
  --fs-body-lg: 1.125rem;  /* @kind other */ /* 18 */
  --fs-body:    1rem;      /* @kind other */ /* 16 */
  --fs-body-sm: 0.9375rem; /* @kind other */ /* 15 */
  --fs-caption: 0.8125rem; /* @kind other */ /* 13 */
  --fs-eyebrow: 0.75rem;   /* @kind other */ /* 12 */

  --lh-tight:  1.1;  /* @kind other */
  --lh-snug:   1.25; /* @kind other */
  --lh-normal: 1.5;  /* @kind other */
  --lh-loose:  1.65; /* @kind other */

  --lsp-tight:  -0.02em;  /* @kind other */
  --lsp-display:-0.035em; /* @kind other */
  --lsp-wide:    0.08em;  /* @kind other */
  --lsp-eyebrow: 0.14em;  /* @kind other */

  /* Corbel ships only 400 + 700. Medium/semibold alias to bold. */
  --fw-light:    400; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   700; /* @kind other */
  --fw-semibold: 700; /* @kind other */
  --fw-bold:     700; /* @kind other */

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
}

/* =========================================================
   DARK MODE — first-class. Swirl looks like the dark-gradient
   variant of the app icon: mid-teal → deep-teal-blue.
   ========================================================= */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg:           var(--ink-950);
  --bg-subtle:    #0e1518;
  --bg-muted:     var(--teal-950);
  --bg-inverse:   var(--ink-0);
  --bg-brand:     var(--teal-950);

  --fg:           #e6edf2;
  --fg-muted:     var(--ink-300);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--ink-900);
  --fg-brand:     var(--teal-300);

  --border:       #1d262d;
  --border-strong:#2a353d;
  --border-brand: var(--teal-400);

  --accent:       var(--teal-400);
  --accent-hover: var(--teal-300);
  --accent-press: var(--teal-200);
  --on-accent:    var(--teal-950);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   BASE TYPOGRAPHY — apply to any element via class, or use
   these element defaults when colors_and_type.css is the only
   stylesheet loaded (good for quick prototypes).
   ========================================================= */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--lsp-tight);
  font-weight: var(--fw-semibold);
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--lsp-display);
  font-weight: var(--fw-semibold);
}
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--lsp-tight);
  font-weight: var(--fw-semibold);
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: var(--fw-semibold);
}
h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
p, .body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-muted); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-subtle); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--lsp-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a { color: var(--fg-brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--teal-200); color: var(--teal-900); }
[data-theme="dark"] ::selection { background: var(--teal-700); color: var(--teal-100); }