/* ============================================================
   Ozworks — Colors & Type
   The single source of truth for color, typography, spacing,
   elevation, and motion tokens across the Ozworks brand.
   ============================================================ */

/* -- Webfonts ------------------------------------------------ */
/* Display: Fraunces sub for a distinctive, slightly editorial
   feel — softer than a tech sans, warmer than a traditional
   serif. If we ever secure a bespoke face, swap here. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ==========================================================
     COLOR — Primary (Amethyst)
     Purple is Ozworks' signature. The scale below is a calibrated
     OKLCH ramp so tints stay perceptually even at every step.
     ========================================================== */
  --oz-purple-50:  #f6f2ff;
  --oz-purple-100: #ece1ff;
  --oz-purple-200: #d8c2ff;
  --oz-purple-300: #bd9bff;
  --oz-purple-400: #9d72f5;
  --oz-purple-500: #7c4ee0;   /* brand core */
  --oz-purple-600: #6236c2;
  --oz-purple-700: #4d289c;
  --oz-purple-800: #371b70;
  --oz-purple-900: #221045;
  --oz-purple-950: #140826;

  /* Accent — a warm, lamp-lit gold used sparingly for highlights,
     pull-quotes, and the "spark" glyph in the wordmark. */
  --oz-gold-300: #f6d38a;
  --oz-gold-400: #ecb85f;
  --oz-gold-500: #d99a2e;
  --oz-gold-600: #ad7812;

  /* Neutrals — warm-tinted greys (a whisper of purple) so nothing
     in the system feels sterile next to the brand color. */
  --oz-ink-950:  #0e0b14;     /* deepest text / dark bg */
  --oz-ink-900:  #1a1522;
  --oz-ink-800:  #2a2436;
  --oz-ink-700:  #3d3650;
  --oz-ink-600:  #595068;
  --oz-ink-500:  #786f86;
  --oz-ink-400:  #9a92a6;
  --oz-ink-300:  #bdb6c6;
  --oz-ink-200:  #ddd8e3;
  --oz-ink-100:  #ece8f1;
  --oz-ink-50:   #f7f5fa;
  --oz-paper:    #fbfaff;     /* off-white page */
  --oz-white:    #ffffff;

  /* Semantic */
  --oz-success: #2f9d6a;
  --oz-warning: #c68216;
  --oz-danger:  #c8385a;
  --oz-info:    var(--oz-purple-500);

  /* ==========================================================
     COLOR — Semantic (light mode)
     ========================================================== */
  --bg:           var(--oz-paper);
  --bg-raised:    var(--oz-white);
  --bg-sunken:    var(--oz-ink-50);
  --bg-inverse:   var(--oz-ink-950);

  --fg:           var(--oz-ink-950);     /* primary text */
  --fg-muted:     var(--oz-ink-600);     /* secondary text */
  --fg-subtle:    var(--oz-ink-500);     /* tertiary text, captions */
  --fg-inverse:   var(--oz-paper);
  --fg-brand:     var(--oz-purple-600);

  --border:       var(--oz-ink-200);
  --border-strong:var(--oz-ink-300);
  --border-brand: var(--oz-purple-300);

  --accent:       var(--oz-purple-500);
  --accent-hover: var(--oz-purple-600);
  --accent-press: var(--oz-purple-700);
  --accent-soft:  var(--oz-purple-50);
  --accent-on:    var(--oz-white);

  /* ==========================================================
     TYPE
     Display: Fraunces (warm serif) — headlines and marketing.
     Body:    Inter (neutral sans) — UI + long-form prose.
     Mono:    JetBrains Mono — code, tokens, data.
     ========================================================== */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.2 minor-third, tuned) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

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

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

  /* ==========================================================
     RADII
     ========================================================== */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;   /* default card */
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 9999px;

  /* ==========================================================
     SHADOWS — soft, warm purple-tinted, never grey
     ========================================================== */
  --shadow-xs:  0 1px 2px rgba(34, 16, 69, 0.06);
  --shadow-sm:  0 2px 6px rgba(34, 16, 69, 0.06), 0 1px 2px rgba(34, 16, 69, 0.04);
  --shadow-md:  0 6px 18px rgba(34, 16, 69, 0.08), 0 2px 4px rgba(34, 16, 69, 0.04);
  --shadow-lg:  0 18px 40px rgba(34, 16, 69, 0.12), 0 4px 10px rgba(34, 16, 69, 0.06);
  --shadow-xl:  0 32px 72px rgba(34, 16, 69, 0.18), 0 8px 18px rgba(34, 16, 69, 0.08);
  --shadow-glow:0 0 0 4px rgba(124, 78, 224, 0.18);

  /* ==========================================================
     MOTION
     Gentle, quick. Nothing bouncy — we are professional.
     ========================================================== */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0.04, 0.98, 0.34);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;

  /* ==========================================================
     LAYOUT
     ========================================================== */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
}

/* ============================================================
   SEMANTIC TYPE RECIPES
   Use these instead of raw tokens in product CSS.
   ============================================================ */

.oz-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-brand);
}

.oz-h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-48), 6vw, var(--fs-72));
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.oz-h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-36), 4vw, var(--fs-48));
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.oz-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.oz-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

.oz-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.oz-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

.oz-small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.oz-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-snug);
}

.oz-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
}

.oz-quote {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* ============================================================
   ELEMENT PRIMITIVES
   ============================================================ */

.oz-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform  var(--dur-base) var(--ease-out);
}

.oz-card:hover {
  box-shadow: var(--shadow-md);
}

.oz-btn {
  --_bg: var(--accent);
  --_fg: var(--accent-on);
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px 20px;
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.oz-btn:hover   { background: var(--accent-hover); }
.oz-btn:active  { background: var(--accent-press); transform: translateY(1px); box-shadow: var(--shadow-xs); }
.oz-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.oz-btn--ghost {
  --_bg: transparent;
  --_fg: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.oz-btn--ghost:hover { --_bg: var(--oz-ink-50); }

.oz-btn--soft {
  --_bg: var(--accent-soft);
  --_fg: var(--accent-hover);
  box-shadow: none;
}
.oz-btn--soft:hover { --_bg: var(--oz-purple-100); }