/* =========================================================================
   Softera Design System — Foundations
   Colors and typography. Import this in any Softera-branded artifact.
   ========================================================================= */

@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans is the body pairing per brand guidelines.
   Pulled from Google Fonts — substitute with self-hosted files in production. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand palette ---------- */
  --softera-deep:  #003B66;  /* backgrounds, headers, dark hero */
  --softera-blue:  #0061A1;  /* primary, logo, primary CTA */
  --softera-sky:   #0096C6;  /* links, hover */
  --softera-cyan:  #00CAD0;  /* accents, callout connectors */
  --softera-mint:  #75FAC7;  /* energetic accents, "waste" sector */

  /* ---------- Neutrals ---------- */
  --bg:            #FFFFFF;
  --bg-soft:       #F4F7FA;  /* page sections, app shell */
  --bg-muted:      #E7EEF4;  /* dividers, table rows */
  --line:          #D7E0E8;  /* hairline borders */
  --line-strong:   #B6C3D0;

  --ink:           #0E1A2A;  /* primary text */
  --ink-2:         #3A4A5C;  /* secondary text */
  --ink-3:         #6B7A8A;  /* tertiary text, captions */
  --ink-on-deep:   #DCE9F4;  /* secondary text on dark */

  /* ---------- Semantic ---------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-2: var(--ink-on-deep);

  --link: var(--softera-sky);
  --link-hover: var(--softera-blue);

  --primary: var(--softera-blue);
  --primary-hover: #004C82;
  --primary-pressed: #003B66;

  --accent: var(--softera-cyan);
  --accent-2: var(--softera-mint);

  --success: #1F9D6E;
  --warning: #C77E16;
  --danger:  #C63B3B;

  /* ---------- Surfaces ---------- */
  --surface-1: #FFFFFF;
  --surface-2: var(--bg-soft);
  --surface-dark: var(--softera-deep);
  --surface-glass: rgba(255, 255, 255, 0.05);
  --surface-glass-strong: rgba(255, 255, 255, 0.08);

  /* ---------- Signature gradient ---------- */
  --gradient-aurora:
    radial-gradient(120% 90% at 90% 30%, #75FAC7 0%, transparent 45%),
    radial-gradient(90% 100% at 70% 60%, #00CAD0 0%, transparent 55%),
    radial-gradient(120% 120% at 20% 80%, #0096C6 0%, transparent 60%),
    linear-gradient(135deg, #003B66 0%, #0061A1 60%, #0096C6 100%);

  --gradient-aurora-dim:
    radial-gradient(80% 80% at 85% 25%, rgba(117,250,199,0.55) 0%, transparent 55%),
    radial-gradient(90% 100% at 70% 60%, rgba(0,202,208,0.55) 0%, transparent 60%),
    linear-gradient(135deg, #003B66 0%, #0061A1 70%, #004C82 100%);

  /* ---------- Type ramp ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 64px;   /* H1 hero */
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      26px;
  --fs-h4:      20px;
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-ui:      15px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* Display headings can run -1 to -2% tracking — Space Grotesk is wide */
  --tr-display: -0.02em;
  --tr-heading: -0.01em;
  --tr-body:    0;
  --tr-caps:    0.08em;

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

  /* ---------- Radii ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(14, 26, 42, 0.04), 0 1px 3px rgba(14, 26, 42, 0.06);
  --shadow-2: 0 4px 12px rgba(14, 26, 42, 0.06), 0 2px 4px rgba(14, 26, 42, 0.04);
  --shadow-3: 0 12px 32px rgba(0, 59, 102, 0.10), 0 4px 8px rgba(14, 26, 42, 0.05);
  --shadow-4: 0 24px 60px rgba(0, 59, 102, 0.18), 0 8px 16px rgba(0, 59, 102, 0.08);
  --shadow-callout: 0 6px 20px rgba(0, 59, 102, 0.18), 0 1px 2px rgba(0, 59, 102, 0.10);
  --ring-focus: 0 0 0 3px rgba(0, 150, 198, 0.35);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =========================================================================
   Element-level defaults — drop-in semantic tags
   ========================================================================= */

html { color: var(--fg-1); background: var(--bg); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-h2);      font-weight: 500; line-height: var(--lh-snug);  letter-spacing: var(--tr-heading); }
h3 { font-size: var(--fs-h3);      font-weight: 500; line-height: var(--lh-snug);  letter-spacing: var(--tr-heading); }
h4 { font-size: var(--fs-h4);      font-weight: 600; line-height: var(--lh-snug); }

p  { margin: 0; text-wrap: pretty; }
small { font-size: var(--fs-caption); color: var(--fg-3); }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--link) 35%, transparent);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--bg-muted); padding: 2px 6px; border-radius: var(--r-1); }

/* Utility classes */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--softera-sky);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

.surface-aurora {
  background: var(--gradient-aurora);
  color: var(--fg-on-dark);
}
.surface-deep { background: var(--surface-dark); color: var(--fg-on-dark); }