/* ============================================================
   Red Yellow Blue — Design System Tokens
   ============================================================
   Colors and typography variables for the RYB brand.
   Import: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---- Webfonts (via Google Fonts) ----
   ⚠ FONT SUBSTITUTION FLAG: No font files were provided with the brand assets.
   The wordmark in the logo suggests a chunky humanist sans-serif.
   We use Bricolage Grotesque (display) + Inter (body) as the closest open
   substitutes. Update if the actual brand fonts are provided.
*/
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,400..900;1,400..900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     COLORS — Brand primaries (sampled from the RYB brandmark)
     ============================================================ */
  --ryb-red:    #F3392F;
  --ryb-yellow: #FFC600;
  --ryb-blue:   #0082D4;

  /* Tints (~85% lighter) — for soft backgrounds, hover wash */
  --ryb-red-tint:    #FDE0DD;
  --ryb-yellow-tint: #FFF3CC;
  --ryb-blue-tint:   #CCE6F6;

  /* Shades (~20% darker) — for hover states on solid buttons */
  --ryb-red-shade:    #C12A22;
  --ryb-yellow-shade: #CC9F00;
  --ryb-blue-shade:   #00689F;

  /* ---- Neutrals (warm-leaning to feel friendly, not clinical) ---- */
  --ink-900: #0F0F12;   /* primary text, logo black */
  --ink-700: #2A2A30;   /* headings */
  --ink-500: #5A5A66;   /* body */
  --ink-400: #8B8B95;   /* secondary text */
  --ink-300: #C9C9CF;   /* dividers, borders strong */
  --ink-200: #E4E4E8;   /* borders, subtle dividers */
  --ink-100: #F2F2F4;   /* tinted surface */
  --ink-50:  #F8F8FA;   /* page bg alt */
  --paper:   #FFFFFF;   /* card surface */
  --canvas:  #FBFAF7;   /* main page bg — warm off-white */

  /* ---- Semantic ---- */
  --success: #1F8A4D;
  --warning: #E89B0E;
  --danger:  var(--ryb-red);
  --info:    var(--ryb-blue);

  /* ---- Foreground / Background semantic tokens ---- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-500);   /* body / secondary */
  --fg-3: var(--ink-400);   /* tertiary / muted */
  --fg-on-brand: #FFFFFF;   /* text on red/blue/black */
  --fg-on-yellow: var(--ink-900); /* yellow needs dark text */

  --bg-1: var(--canvas);    /* page */
  --bg-2: var(--paper);     /* card */
  --bg-3: var(--ink-100);   /* subtle inset */

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Archivo", "Archivo Black", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Base sizes (mobile-first; scale up at larger viewports if you like) */
  --fs-display:   clamp(48px, 6vw, 88px);
  --fs-h1:        clamp(36px, 4.5vw, 56px);
  --fs-h2:        clamp(28px, 3.2vw, 40px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;

  --lh-display:   0.95;
  --lh-heading:   1.1;
  --lh-body:      1.55;

  --ls-display:  -0.025em;
  --ls-heading:  -0.015em;
  --ls-body:     0;
  --ls-eyebrow:  0.08em;

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

  /* ============================================================
     RADII — generous, friendly, never harsh
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — soft, slightly warm; never heavy/dramatic
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(15,15,18,0.04), 0 1px 3px rgba(15,15,18,0.04);
  --shadow-2: 0 2px 4px rgba(15,15,18,0.04), 0 4px 12px rgba(15,15,18,0.06);
  --shadow-3: 0 4px 8px rgba(15,15,18,0.05), 0 12px 28px rgba(15,15,18,0.08);
  --shadow-4: 0 8px 16px rgba(15,15,18,0.06), 0 24px 56px rgba(15,15,18,0.12);
  --shadow-focus: 0 0 0 4px rgba(31,111,181,0.20); /* blue ring */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 400ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply by adding to <body> or a wrapper class .ryb-prose
   ============================================================ */
.ryb,
.ryb-prose {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ryb-prose h1, .ryb h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  font-weight: 700;
  color: var(--fg-1);
  text-wrap: balance;
}
.ryb-prose h2, .ryb h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 700;
  text-wrap: balance;
}
.ryb-prose h3, .ryb h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
}
.ryb-prose h4, .ryb h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}
.ryb-prose p, .ryb p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 65ch;
}
.ryb-prose .display, .ryb .display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.ryb-prose .eyebrow, .ryb .eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.ryb-prose code, .ryb code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}