/* ============================================================
   Inorms AI — Colors & Type
   ============================================================ */

/* Webfonts ---------------------------------------------------- */
/* Roboto + Roboto Mono — official Inorms AI brand fonts.
   Source Serif 4 (Google Fonts) retained for the rare editorial pull
   on the marketing site only. */
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "Roboto Mono"; src: url("../fonts/RobotoMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/RobotoMono-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/RobotoMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../fonts/RobotoMono-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap");

:root {
  /* === Brand color tokens (provided) =========================== */
  --color-anchor:      #002B5B;  /* deep navy — primary brand */
  --color-accent:      #0F766E;  /* teal — secondary brand */
  --color-bg:          #FFFFFF;
  --color-surface:     #F0FDFA;  /* mint surface — panels, hovers */
  --color-text:        #0F172A;  /* slate-900 */
  --color-text-muted:  #64748B;  /* slate-500 */
  --color-border:      #E2E8F0;  /* slate-200 */
  --color-cta:         #0891B2;  /* cyan — primary action */
  --color-destructive: #B91C1C;

  /* === Derived scales ========================================== */
  /* Anchor (navy) */
  --anchor-50:  #EAF1F9;
  --anchor-100: #C8DAEC;
  --anchor-200: #8FB1D5;
  --anchor-300: #5687BD;
  --anchor-400: #2D5F95;
  --anchor-500: #002B5B;  /* base */
  --anchor-600: #00264F;
  --anchor-700: #001E3F;
  --anchor-800: #00162E;
  --anchor-900: #000B1A;

  /* Accent (teal) */
  --accent-50:  #ECFDF6;
  --accent-100: #CCFBEF;
  --accent-200: #99F6E0;
  --accent-300: #5EEAD3;
  --accent-400: #2DD4BD;
  --accent-500: #14B8A4;
  --accent-600: #0F766E;  /* base */
  --accent-700: #115E58;
  --accent-800: #134E48;
  --accent-900: #042F2C;

  /* CTA (cyan) */
  --cta-50:  #ECFEFF;
  --cta-100: #CFFAFE;
  --cta-200: #A5F3FC;
  --cta-300: #67E8F9;
  --cta-400: #22D3EE;
  --cta-500: #06B6D4;
  --cta-600: #0891B2;  /* base */
  --cta-700: #0E7490;
  --cta-800: #155E75;
  --cta-900: #164E63;

  /* Neutral (slate) */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Semantic */
  --success:        #15803D;
  --success-bg:     #F0FDF4;
  --warning:        #B45309;
  --warning-bg:     #FFFBEB;
  --info:           #0891B2;
  --info-bg:        #ECFEFF;
  --destructive:    #B91C1C;
  --destructive-bg: #FEF2F2;

  /* === Surface roles =========================================== */
  --bg-app:        var(--color-bg);
  --bg-elevated:   #FFFFFF;
  --bg-subtle:     var(--slate-50);
  --bg-mint:       var(--color-surface);
  --bg-anchor:     var(--color-anchor);
  --bg-anchor-soft: var(--anchor-50);

  --fg-default:    var(--color-text);
  --fg-muted:      var(--color-text-muted);
  --fg-subtle:     var(--slate-400);
  --fg-on-anchor:  #FFFFFF;
  --fg-on-accent:  #FFFFFF;
  --fg-link:       var(--color-cta);
  --fg-brand:      var(--color-anchor);

  /* === Type families =========================================== */
  --font-sans:    "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* === Type scale (1.200 minor third) ========================== */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  72px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

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

  /* === Radii =================================================== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* === Shadows ================================================= */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(0, 43, 91, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-anchor: 0 12px 32px rgba(0, 43, 91, 0.18);
  --shadow-focus: 0 0 0 3px rgba(8, 145, 178, 0.25);

  /* === Borders ================================================= */
  --border-width: 1px;
  --border-color: var(--color-border);
  --border-strong: var(--slate-300);

  /* === Motion ================================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;
}

/* ============================================================
   Semantic type styles — drop these classes onto elements
   ============================================================ */
.type-display-xl,
h1.display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semi);
  color: var(--fg-default);
}

.type-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semi);
  color: var(--fg-default);
}

.type-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semi);
  color: var(--fg-default);
}

.type-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semi);
  color: var(--fg-default);
}

.type-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--fg-default);
}

.type-h5, h5 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--fg-default);
}

.type-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
  font-weight: var(--weight-regular);
}

.type-body, p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-default);
  font-weight: var(--weight-regular);
}

.type-body-sm, .type-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-default);
}

.type-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.type-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--weight-semi);
  color: var(--color-accent);
}

.type-mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: "ss01", "cv11";
}

.type-serif-pull {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-default);
}

a, .type-link {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--cta-700); }

::selection {
  background: var(--accent-200);
  color: var(--anchor-700);
}