/* AIReady Design System — colors_and_type.css
 * Source of truth: reference/design_v3.md
 * Loaded by every preview card, slide, and UI kit in this project.
 *
 * Two type voices, strictly partitioned:
 *   - Rubik     -> marketing, slide-print
 *   - Montserrat -> product-ui, embedded-course, internal-tool
 * Black is never used. Use --color-ink (#1E052E) everywhere instead.
 */

/* Rubik — brand-supplied TTFs (full weight range incl. italics) */

/* Montserrat — brand-supplied files NOT yet provided; pulled from Google Fonts as substitute. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  /* ── Brand & Accent ──────────────────────────────────────────── */
  --color-primary:        #6321A4;  /* primary purple — brand voice */
  --color-primary-deep:   #4A0987;  /* royal purple — emphasis */
  --color-ink:            #1E052E;  /* ink deep — replaces black */
  --color-lilac:          #BCBCF5;  /* mid lavender — ambient fill */
  --color-icon-on-dark:   #D3D7F8;  /* lavender mist — icons / secondary text on dark */

  /* ── Surface ─────────────────────────────────────────────────── */
  --color-canvas:           #FFFFFF;
  --color-canvas-sky:       #E5F7FF;
  --color-canvas-lavender:  #E5E8FF;
  --color-surface-frost:    #E2E4F3;
  --color-hairline:         #E2E4F3;  /* same hex as surface-frost (intentional) */

  /* ── Yellow complement (emphasis only) ───────────────────────── */
  --color-warm-cream:      #FFF3D2;
  --color-warm-butter:     #FFEDAD;
  --color-warm-sunflower:  #FFDB75;
  --color-warm-caramel:    #603120;  /* the only legal ink on yellow */

  /* ── Text aliases ────────────────────────────────────────────── */
  --color-body-on-dark:           #FFFFFF;
  --color-body-on-warm:           #603120;
  --color-body-secondary-on-dark: #D3D7F8;

  /* ── Feedback (provisional) ──────────────────────────────────── */
  --color-error:        #C73B4A;
  --color-error-soft:   #FFE8EC;
  --color-success:      #2F7D5C;
  --color-success-soft: #E7F6EF;

  /* ── Gradients (two grammars, no more) ───────────────────────── */
  --gradient-atmosphere: linear-gradient(135deg, #E5F7FF, #E5E8FF);
  --gradient-bold-cool:  linear-gradient(135deg, #AAF5FF, #C2A6F1);

  /* ── Spacing scale (8pt grid) ────────────────────────────────── */
  --space-xxs:        4px;
  --space-xs:         8px;
  --space-sm:        12px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        32px;
  --space-xxl:       48px;
  --space-section:   80px;
  --space-section-lg: 120px;

  /* ── Radius scale ────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-xxl:  32px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ── Elevation (one shadow family) ───────────────────────────── */
  --shadow-none: none;
  --shadow-card-emphasis:     0 12px 32px rgba(74, 9, 135, 0.18);
  --shadow-card-emphasis-ink: 0 12px 32px rgba(30, 5, 46, 0.16);

  /* ── Motion ──────────────────────────────────────────────────── */
  --motion-instant: 0ms;
  --motion-press:  100ms;
  --motion-fast:   160ms;
  --motion-base:   240ms;
  --motion-slow:   320ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Type families ───────────────────────────────────────────── */
  --font-marketing: "Rubik", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-product:   "Montserrat", system-ui, -apple-system, "Avenir Next", sans-serif;

  /* Default voice — switch on a per-surface root via [data-surface]   */
  --font-body: var(--font-marketing);

  /* ── Type ramp (provisional) ─────────────────────────────────── */
  --type-hero-size:        56px;  --type-hero-weight:        700;  --type-hero-lh:        1.10;  --type-hero-track:       -0.5px;
  --type-display-lg-size:  44px;  --type-display-lg-weight:  700;  --type-display-lg-lh:  1.12;  --type-display-lg-track: -0.4px;
  --type-display-md-size:  32px;  --type-display-md-weight:  700;  --type-display-md-lh:  1.20;  --type-display-md-track: -0.3px;
  --type-display-sm-size:  24px;  --type-display-sm-weight:  700;  --type-display-sm-lh:  1.25;  --type-display-sm-track: -0.2px;
  --type-lead-size:        20px;  --type-lead-weight:        400;  --type-lead-lh:        1.50;
  --type-body-size:        16px;  --type-body-weight:        400;  --type-body-lh:        1.55;
  --type-body-strong-weight: 700;
  --type-caption-size:     14px;  --type-caption-weight:     400;  --type-caption-lh:     1.45;
  --type-caption-strong-weight: 700;
  --type-fine-size:        12px;  --type-fine-weight:        400;  --type-fine-lh:        1.40;
  --type-eyebrow-size:     12px;  --type-eyebrow-weight:     700;  --type-eyebrow-lh:     1.20;  --type-eyebrow-track: 1.2px;
}

/* Surface routing — set [data-surface] on a wrapper to switch voice. */
[data-surface="marketing"],
[data-surface="slide-print"] { --font-body: var(--font-marketing); }
[data-surface="product-ui"],
[data-surface="embedded-course"],
[data-surface="internal-tool"] { --font-body: var(--font-product); }

/* ── Semantic typography classes ─────────────────────────────── */
.t-hero       { font: var(--type-hero-weight) var(--type-hero-size)/var(--type-hero-lh) var(--font-body); letter-spacing: var(--type-hero-track); color: var(--color-ink); }
.t-display-lg { font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-lh) var(--font-body); letter-spacing: var(--type-display-lg-track); color: var(--color-ink); }
.t-display-md { font: var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-lh) var(--font-body); letter-spacing: var(--type-display-md-track); color: var(--color-ink); }
.t-display-sm { font: var(--type-display-sm-weight) var(--type-display-sm-size)/var(--type-display-sm-lh) var(--font-body); letter-spacing: var(--type-display-sm-track); color: var(--color-ink); }
.t-lead       { font: var(--type-lead-weight) var(--type-lead-size)/var(--type-lead-lh) var(--font-body); color: var(--color-ink); }
.t-body       { font: var(--type-body-weight) var(--type-body-size)/var(--type-body-lh) var(--font-body); color: var(--color-ink); }
.t-body-strong{ font: var(--type-body-strong-weight) var(--type-body-size)/var(--type-body-lh) var(--font-body); color: var(--color-ink); }
.t-caption    { font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-lh) var(--font-body); color: var(--color-ink); }
.t-caption-strong { font: var(--type-caption-strong-weight) var(--type-caption-size)/var(--type-caption-lh) var(--font-body); color: var(--color-ink); }
.t-fine       { font: var(--type-fine-weight) var(--type-fine-size)/var(--type-fine-lh) var(--font-body); color: var(--color-ink); }
.t-eyebrow    { font: var(--type-eyebrow-weight) var(--type-eyebrow-size)/var(--type-eyebrow-lh) var(--font-body); letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--color-primary-deep); }

/* ── Element defaults (when classes aren't used) ─────────────── */
html, body { font-family: var(--font-body); color: var(--color-ink); -webkit-font-smoothing: antialiased; }
h1 { font: var(--type-hero-weight) var(--type-hero-size)/var(--type-hero-lh) var(--font-body); letter-spacing: var(--type-hero-track); color: var(--color-ink); margin: 0; }
h2 { font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-lh) var(--font-body); letter-spacing: var(--type-display-lg-track); color: var(--color-ink); margin: 0; }
h3 { font: var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-lh) var(--font-body); letter-spacing: var(--type-display-md-track); color: var(--color-ink); margin: 0; }
h4 { font: var(--type-display-sm-weight) var(--type-display-sm-size)/var(--type-display-sm-lh) var(--font-body); letter-spacing: var(--type-display-sm-track); color: var(--color-ink); margin: 0; }
p  { font: var(--type-body-weight) var(--type-body-size)/var(--type-body-lh) var(--font-body); color: var(--color-ink); margin: 0; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ── A reusable button primitive (variants set fill/border/text) ─ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 12px 24px;
  border: 0; border-radius: var(--radius-pill);
  font: 700 14px/1 var(--font-body); letter-spacing: 0.1px;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); transition-duration: var(--motion-press); }
.btn:focus-visible { outline: 2px solid var(--color-primary-deep); outline-offset: 2px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--primary       { background: var(--color-primary);      color: var(--color-body-on-dark); }
.btn--primary-deep  { background: var(--color-primary-deep); color: var(--color-body-on-dark); }
.btn--ghost         { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn--on-dark       { background: var(--color-canvas); color: var(--color-ink); }
.btn--warm          { background: var(--color-warm-sunflower); color: var(--color-warm-caramel); }
.btn--utility       { height: 36px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; }

/* ── Card primitive ─────────────────────────────────────────── */
.card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}
.card--emphasis { box-shadow: var(--shadow-card-emphasis); }
.card--on-dark  { background: var(--color-primary-deep); color: var(--color-body-on-dark); border-color: transparent; }
.card--warm     { background: var(--color-warm-cream); color: var(--color-warm-caramel); border-color: transparent; }

/* ── Icon tile ───────────────────────────────────────────────── */
.icon-tile {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--gradient-atmosphere);
  color: var(--color-primary-deep);
  flex-shrink: 0;
}
.icon-tile--circle { border-radius: var(--radius-full); }
.icon-tile--dark   { background: var(--color-primary-deep); color: var(--color-icon-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition-duration: 100ms; }
  .btn:hover, .btn:active { transform: none; }
}