/* Korvyn Labs — flattened design tokens.
   Generated from tokens/*.css. Do not edit here; edit the tokens and re-flatten. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ══ tokens/fonts.css ══════════════════════════════════════════ */
/* Webfonts.
   Montserrat is the display face carried over from the source deck (it shipped
   embedded inside the .pptx). Source Sans 3 replaces Calibri for screen use —
   see readme.md > VISUAL FOUNDATIONS for the rationale. IBM Plex Mono replaces
   the deck's Courier New for hex codes and tabular data.

   These load from Google Fonts. If you need offline/self-hosted binaries,
   download the families and swap these @import lines for local @font-face rules. */

/* ══ tokens/colors.css ══════════════════════════════════════════ */
:root {
  /* ---- Brand palette (verbatim from the Brand Guide, slide 4) ---- */
  --korvyn-navy: #0D1B2A;         /* Raven Navy */
  --korvyn-teal: #0F766E;         /* Corvid Teal */
  --korvyn-blue: #2563EB;         /* Sky Blue */
  --korvyn-purple: #6B46C1;       /* Story Purple */
  --korvyn-gold: #F2B705;         /* Opportunity Gold */
  --korvyn-green: #4CAF7D;        /* Growth Green */
  --korvyn-paper: #F5F5F2;        /* Paper Grey */

  /* ---- Brand tints & shades (derived; for hovers, fills, charts) ---- */
  --korvyn-navy-tint: #1A2433;
  --korvyn-navy-tint-2: #2B3947;
  --korvyn-teal-dark: #0B5A54;
  --korvyn-teal-wash: #E6F1F0;
  --korvyn-blue-dark: #1D4FBF;
  --korvyn-blue-wash: #E8EEFD;
  --korvyn-purple-dark: #57379F;
  --korvyn-purple-wash: #EEEAF9;
  --korvyn-gold-dark: #C99604;
  --korvyn-gold-wash: #FDF3D6;
  --korvyn-green-dark: #3D9067;
  --korvyn-green-wash: #E8F5EE;

  /* ---- Neutral ink ramp (every value observed in the source deck) ---- */
  --ink-900: #0D1B2A;
  --ink-800: #1A2433;
  --ink-700: #2B3947;
  --ink-500: #64748B;
  --ink-400: #8A93A0;
  --ink-350: #9AA3AD;
  --ink-300: #A8B3BF;
  --ink-250: #C7CDD4;
  --ink-200: #D7DBE0;
  --ink-100: #E4E7EB;
  --ink-050: #F5F5F2;
  --ink-000: #FFFFFF;

  /* Cool tints used only for type sitting on Raven Navy */
  --ink-on-dark-200: #C7D2DB;
  --ink-on-dark-400: #9FB0C3;

  /* ---- Status ---- */
  --status-danger: #C0392B;       /* Alert Red — the deck's DON'T markers */
  --status-danger-wash: #FBEAE7;
  --status-success: var(--korvyn-green);
  --status-success-wash: var(--korvyn-green-wash);
  --status-warning: var(--korvyn-gold);
  --status-warning-wash: var(--korvyn-gold-wash);
  --status-info: var(--korvyn-blue);
  --status-info-wash: var(--korvyn-blue-wash);

  /* ---- Semantic: text ---- */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-inverse: var(--ink-000);
  --text-inverse-secondary: var(--ink-on-dark-200);
  --text-inverse-muted: var(--ink-on-dark-400);
  --text-link: var(--korvyn-teal);
  --text-link-hover: var(--korvyn-teal-dark);

  /* ---- Semantic: surface ---- */
  --surface-page: var(--ink-000);
  --surface-paper: var(--korvyn-paper);
  --surface-card: var(--ink-000);
  --surface-sunken: var(--ink-050);
  --surface-dark: var(--korvyn-navy);
  --surface-dark-raised: var(--korvyn-navy-tint);
  --surface-disabled: var(--ink-050);

  /* ---- Semantic: border ---- */
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-dark: rgba(255, 255, 255, 0.14);
  --border-focus: var(--korvyn-blue);

  /* ---- Semantic: interactive (rebound per sub-brand in brands.css) ---- */
  --accent: var(--korvyn-teal);
  --accent-hover: var(--korvyn-teal-dark);
  --accent-wash: var(--korvyn-teal-wash);
  --accent-contrast: var(--ink-000);
  --accent-secondary: var(--korvyn-navy);

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* ---- The ring motif (see readme > VISUAL FOUNDATIONS) ---- */
  --ring-stroke-width: 2px;
  --ring-opacity: 0.45;

  /* ---- Pillar journey colors (Brand Guide, slide 3, verbatim) ---- */
  --pillar-connect: var(--korvyn-teal);
  --pillar-discover: var(--korvyn-blue);
  --pillar-build: var(--korvyn-gold);
  --pillar-guide: var(--korvyn-teal);
  --pillar-remember: var(--korvyn-purple);
  --pillar-tell-stories: var(--korvyn-purple);
  --pillar-grow: var(--korvyn-green);
}

/* ══ tokens/typography.css ══════════════════════════════════════════ */
:root {
  /* ---- Families ---- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Carlito", Calibri, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

  /* Office documents only: Carlito is metrically identical to Calibri, so old
     decks and Word files reflow line-for-line. Never use it on the web. */
  --font-body-office: "Carlito", Calibri, sans-serif;

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Size scale ---- */
  --size-display-xl: 3.5rem;    /* 56px — cover / hero headline */
  --size-display-l: 2.75rem;    /* 44px — page hero */
  --size-display-m: 2.25rem;    /* 36px — section opener */
  --size-title: 1.875rem;       /* 30px — slide & page title (deck: 30pt) */
  --size-heading: 1.375rem;     /* 22px */
  --size-subheading: 1.125rem;  /* 18px — deck: 18pt section header */
  --size-body-l: 1rem;          /* 16px */
  --size-body: 0.9375rem;       /* 15px — default UI/body */
  --size-body-s: 0.875rem;      /* 14px — deck: 14pt body */
  --size-caption: 0.75rem;      /* 12px — deck: 10–12pt caption */
  --size-micro: 0.6875rem;      /* 11px — footers, legal */

  /* ---- Line heights ---- */
  --leading-tight: 1.1;         /* display & titles */
  --leading-snug: 1.3;          /* headings, stat labels */
  --leading-normal: 1.5;        /* UI text */
  --leading-relaxed: 1.65;      /* body paragraphs */

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;  /* Montserrat tightens well at large sizes */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;   /* uppercase labels; echoes the wordmark */
  --tracking-wordmark: 0.28em;  /* KORVYN letterspacing in the logo */

  /* ---- Composed roles ---- */
  --type-display: var(--weight-bold) var(--size-display-l) / var(--leading-tight) var(--font-display);
  --type-title: var(--weight-bold) var(--size-title) / var(--leading-tight) var(--font-display);
  --type-heading: var(--weight-bold) var(--size-heading) / var(--leading-snug) var(--font-display);
  --type-subheading: var(--weight-semibold) var(--size-subheading) / var(--leading-snug) var(--font-body);
  --type-body: var(--weight-regular) var(--size-body) / var(--leading-relaxed) var(--font-body);
  --type-body-s: var(--weight-regular) var(--size-body-s) / var(--leading-relaxed) var(--font-body);
  --type-ui: var(--weight-semibold) var(--size-body-s) / var(--leading-normal) var(--font-body);
  --type-caption: var(--weight-regular) var(--size-caption) / var(--leading-normal) var(--font-body);
  --type-eyebrow: var(--weight-bold) var(--size-caption) / var(--leading-normal) var(--font-body);
  --type-mono: var(--weight-regular) var(--size-caption) / var(--leading-normal) var(--font-mono);
}

/* ══ tokens/spacing.css ══════════════════════════════════════════ */
:root {
  /* 4px base. --space-6 (24px) is the workhorse gap; --space-8 (32px)
     separates content blocks; --space-12 (58px) is the deck's page margin. */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 58px;   /* slide / page margin, measured from the source deck */
  --space-13: 64px;
  --space-14: 80px;
  --space-15: 96px;
  --space-16: 128px;

  /* Slide geometry, measured from the 1280x720 source deck. Scale
     proportionally for 1920x1080 (x1.5). */
  --slide-width: 1280px;
  --slide-height: 720px;
  --slide-margin: 58px;
  --slide-content-width: 1165px;
  --slide-title-y: 79px;
  --slide-eyebrow-y: 48px;
  --slide-footer-y: 676px;
  --slide-gutter: 16px;

  /* Web layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter-page: var(--space-6);
}

/* ══ tokens/radius.css ══════════════════════════════════════════ */
:root {
  /* The source deck let Google Slides pick default corner rounding, which
     drifted from 18px to 86px depending on shape size. This is the fix:
     one scale, applied by role. */
  --radius-none: 0;
  --radius-sm: 4px;    /* inputs, badges, tags */
  --radius-md: 8px;    /* buttons, small cards */
  --radius-lg: 12px;   /* cards, panels */
  --radius-xl: 16px;   /* feature cards, image frames */
  --radius-2xl: 24px;  /* hero panels, quote blocks */
  --radius-pill: 999px;
  --radius-circle: 50%;
}

/* ══ tokens/elevation.css ══════════════════════════════════════════ */
:root {
  /* The brand leans on borders and flat paper, not shadow. Reach for
     --shadow-card only when an element genuinely floats; prefer a
     --border-default hairline on a --surface-paper fill. */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-raised: 0 4px 12px rgba(13, 27, 42, 0.08);
  --shadow-overlay: 0 16px 40px rgba(13, 27, 42, 0.16);
  --shadow-dark-overlay: 0 16px 40px rgba(0, 0, 0, 0.40);

  --border-hairline: 1px solid var(--border-subtle);
  --border-card: 1px solid var(--border-default);
}

/* ══ tokens/motion.css ══════════════════════════════════════════ */
:root {
  /* Restrained. The brand is a corvid: deliberate, not bouncy.
     No spring easings, no scale-up entrances, no attention-seeking loops. */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --duration-deliberate: 420ms;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --transition-interactive: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

/* ══ tokens/brands.css ══════════════════════════════════════════ */
/* Sub-brand scopes. One master brand, three product palettes.
   Set data-brand on any container (usually <body> or a product shell) and every
   --accent-* consumer re-tints. Raven Navy, Paper Grey and the ink ramp never
   change — they are what holds the master brand together.

   GrantPath  Navy + Teal    trust & professionalism   (SMB grants)
   Manuscript Purple + Gold  warmth & creativity       (authors / writing)
   GreenLight Blue + Green   progress & growth         -- ASSUMED, confirm
   Corporate  Navy + Teal    the default               */

[data-brand="corporate"],
[data-brand="grantpath"] {
  --accent: var(--korvyn-teal);
  --accent-hover: var(--korvyn-teal-dark);
  --accent-wash: var(--korvyn-teal-wash);
  --accent-contrast: var(--ink-000);
  --accent-secondary: var(--korvyn-navy);
  --accent-support: var(--korvyn-blue);
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.35);
}

[data-brand="manuscript"] {
  --accent: var(--korvyn-purple);
  --accent-hover: var(--korvyn-purple-dark);
  --accent-wash: var(--korvyn-purple-wash);
  --accent-contrast: var(--ink-000);
  --accent-secondary: var(--korvyn-gold);
  --accent-support: var(--korvyn-gold);
  --focus-ring: 0 0 0 3px rgba(107, 70, 193, 0.35);
}

[data-brand="greenlight"] {
  --accent: var(--korvyn-blue);
  --accent-hover: var(--korvyn-blue-dark);
  --accent-wash: var(--korvyn-blue-wash);
  --accent-contrast: var(--ink-000);
  --accent-secondary: var(--korvyn-green);
  --accent-support: var(--korvyn-green);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* Dark surfaces: flip text and border semantics, keep accents. */
[data-surface="dark"] {
  --surface-page: var(--korvyn-navy);
  --surface-card: var(--korvyn-navy-tint);
  --surface-sunken: var(--korvyn-navy);
  --text-primary: var(--ink-000);
  --text-secondary: var(--ink-on-dark-200);
  --text-muted: var(--ink-on-dark-400);
  --text-faint: var(--ink-on-dark-400);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
}