/* ============================================================
   CIRCUS MEDIA — DESIGN TOKENS
   colors_and_type.css
   ============================================================
   Brand: Circus Media (CM)
   Hero color sampled directly from official logo: #C25033

   This file is the single source of truth for color + type.
   Import once at the top of any HTML file:
     <link rel="stylesheet" href="colors_and_type.css" />
   ============================================================ */

/* ---------- WEB FONTS ----------
   OFFICIAL CM PAIRING: Times New Roman (serif) + Futura PT (sans)
   Times New Roman is system-installed everywhere.
   Futura PT is licensed (Adobe Fonts / Paratype) — load it via your Adobe
   kit when in production. For prototypes we substitute **Jost** from
   Google Fonts (geometric sans, very close to Futura PT's proportions).
   ----------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     BRAND COLORS
     ============================================================ */

  /* ----- OFFICIAL PALETTE (from brand book) ----- */
  /* Rust — primary */
  --rust-50:  #FBF1ED;
  --rust-100: #F5DDD2;
  --rust-200: #ECBCA8;
  --rust-300: #DF9377;
  --rust-400: #D26F4E;
  --rust-500: #C25033;   /* PANTONE 7580 C */
  --rust-600: #A8412A;
  --rust-700: #8A3422;
  --rust-800: #6A281A;
  --rust-900: #4A1B12;

  /* Deep Ocean — official */
  --deep-ocean: #005677; /* PANTONE 7701 C */
  /* Dusty Teal — official */
  --dusty-teal: #024E66; /* PANTONE 3035 C */
  /* Dirty Berry — official */
  --dirty-berry: #946C73; /* PANTONE 7635 C */
  /* Light Rose — official */
  --light-rose: #F3BDC6;  /* PANTONE 495 C */
  /* Light Sand — official (canvas) */
  --light-sand: #D9C2B6;  /* PANTONE 4755 C */

  /* Cream / paper variants — derived for surfaces */
  --cream-50:  #FDFAF6;
  --cream-100: #F8F1E8;  /* default page background */
  --cream-200: #EFE5D6;
  --cream-300: #D9C2B6;  /* aligns with Light Sand */

  /* Ink — warm near-black, never pure #000 */
  --ink-50:  #6B6259;
  --ink-100: #4D453D;
  --ink-200: #332E28;
  --ink-300: #1F1B17;  /* default text */
  --ink-900: #14110E;

  /* Stone — neutral warm grays */
  --stone-50:  #F4F0EA;
  --stone-100: #E5DFD5;
  --stone-200: #C9C0B2;
  --stone-300: #9C9387;
  --stone-400: #6F685E;
  --stone-500: #46413A;

  /* Accents (used sparingly for status / data viz) */
  --accent-ochre:   #D9A441;  /* warm yellow — highlights */
  --accent-olive:   #6B7A3F;  /* success */
  --accent-clay:    #9B3B1E;  /* danger / deep brand-adjacent red */
  --accent-sky:     #5B7B8A;  /* link / info — muted teal-blue */

  /* ============================================================
     SEMANTIC COLOR ROLES
     ============================================================ */

  /* Surfaces */
  --bg:           var(--cream-100);  /* page */
  --bg-elevated:  var(--cream-50);   /* cards on cream */
  --bg-sunken:    var(--cream-200);  /* inset wells */
  --bg-inverse:   var(--ink-300);    /* dark sections */
  --bg-brand:     var(--rust-500);   /* full-bleed brand sections */

  /* Foregrounds (text + icons) */
  --fg-1:         var(--ink-300);    /* primary text */
  --fg-2:         var(--ink-100);    /* secondary text */
  --fg-3:         var(--stone-400);  /* tertiary / meta */
  --fg-muted:     var(--stone-300);
  --fg-on-brand:  var(--cream-50);   /* text on rust */
  --fg-on-dark:   var(--cream-100);  /* text on ink */
  --fg-link:      var(--rust-600);
  --fg-link-hover:var(--rust-700);

  /* Borders */
  --border-1:     #E2D4BE;          /* hairline on cream */
  --border-2:     #C9C0B2;          /* divider */
  --border-strong:var(--ink-300);

  /* Status — derived from official brand palette
     The brand book doesn't define semantic colours, so we map the six
     official palette colours to functional roles. Used sparingly. */
  --color-success: var(--dusty-teal);   /* #024E66 */
  --color-warning: var(--dirty-berry);  /* #946C73 */
  --color-danger:  var(--rust-500);     /* #C25033 */
  --color-info:    var(--deep-ocean);   /* #005677 */
  --color-notice:  var(--light-rose);   /* #F3BDC6 — soft alerts */

  /* ============================================================
     TYPOGRAPHY
     ============================================================
     Pairing:
       Display + Serif headlines: Fraunces  (editorial, has flair —
                                              substitutes the brand
                                              book's display face)
       UI + Body:                 Inter     (neutral workhorse)
       Mono / data:               JetBrains Mono
     ============================================================ */

  /* OFFICIAL TYPE — confirmed via real CM materials:
     • Futura PT Bold — headlines, navigation, buttons, letter-spaced labels
     • Times New Roman — body copy, intro paragraphs, italic accents
     Futura PT is licensed (Adobe Fonts / Paratype). Jost is the closest
     free Google Fonts substitute used in these prototypes. */
  --font-display: "Futura PT", "Jost", "Futura", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    "Futura PT", "Jost", "Futura", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:   "Times New Roman", "Times", "Liberation Serif", serif;
  --font-body:    "Times New Roman", "Times", "Liberation Serif", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, ~1.25 ratio with editorial display sizes */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   84px;
  --text-7xl:   112px;

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

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.4;
  --leading-relaxed: 1.55;
  --leading-loose:   1.7;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.22em;  /* DEFAULT all-caps eyebrow — cards, nav, sections */
  --tracking-display:0.42em;  /* HERO ONLY — poster type, big dividers, full-bleed labels */

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

  /* ============================================================
     RADII — restrained. Circus Media is editorial, not soft-tech.
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;       /* default cards */
  --radius-lg:   12px;
  --radius-pill: 999px;     /* tags, eyebrows */

  /* ============================================================
     SHADOWS — soft, warm-tinted, not blue
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(31, 27, 23, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 27, 23, 0.08);
  --shadow-md: 0 8px 20px rgba(31, 27, 23, 0.10), 0 2px 4px rgba(31, 27, 23, 0.04);
  --shadow-lg: 0 18px 40px rgba(31, 27, 23, 0.14), 0 4px 8px rgba(31, 27, 23, 0.06);
  --shadow-xl: 0 30px 60px rgba(31, 27, 23, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(31, 27, 23, 0.08);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-narrow: 720px;
  --container:        1040px;
  --container-wide:   1280px;
  --gutter:           clamp(16px, 4vw, 48px);

  /* ============================================================
     THE 44° STROKE — signature CM motif
     ============================================================
     The defining mark of the Circus Media visual system: a single
     diagonal rule at 44° (not 45° — slightly off-axis to feel
     intentional, not generic). Used as:
       • Hero divider on cover slides
       • Page-break rule between proposal sections
       • Background watermark on full-bleed colour pages
       • Web hero accent
     Never decorative. Always either separating two ideas or
     anchoring a hero composition.
     ============================================================ */
  --stroke-angle:     -44deg;
  --stroke-thin:      1px;     /* hairline divider on cream */
  --stroke-rule:      2px;     /* default page-break rule */
  --stroke-bold:      6px;     /* hero / cover stroke */
  --stroke-color:     var(--rust-500);
  --stroke-on-dark:   rgba(255, 255, 255, 0.85);
  --stroke-watermark: rgba(255, 255, 255, 0.12); /* on coloured grounds */
}

/* ============================================================
   STROKE UTILITIES — drop these classes anywhere
   ============================================================ */

/* Inline stroke — a 44° rule with adjustable length */
.cm-stroke {
  display: inline-block;
  height: var(--stroke-rule);
  width: 80px;
  background: var(--stroke-color);
  transform: rotate(var(--stroke-angle));
  transform-origin: left center;
  vertical-align: middle;
}
.cm-stroke--bold { height: var(--stroke-bold); }
.cm-stroke--thin { height: var(--stroke-thin); }
.cm-stroke--ocean { background: var(--deep-ocean); }
.cm-stroke--white { background: #fff; }

/* Watermark stroke — full-bleed background mark */
.cm-stroke-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cm-stroke-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: var(--stroke-bold);
  background: var(--stroke-color);
  opacity: 0.10;
  top: 50%;
  left: -50%;
  transform: rotate(var(--stroke-angle));
  transform-origin: center;
}
.cm-stroke-bg--light::after { background: var(--stroke-on-dark); opacity: 0.18; }
.cm-stroke-bg--watermark::after { background: var(--stroke-watermark); opacity: 1; }

/* Page-break divider — replaces default <hr> on documents */
.cm-rule {
  display: block;
  position: relative;
  height: 14px;
  margin: 32px 0;
  border: 0;
  overflow: hidden;
}
.cm-rule::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--border-1);
}
.cm-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: var(--stroke-rule);
  background: var(--stroke-color);
  transform: translate(-50%, -50%) rotate(var(--stroke-angle));
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display + headings — Fraunces, optical sizing on */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);   /* Futura PT Bold */
  color: var(--ink-300);
  margin: 0;
  text-wrap: balance;
  font-weight: 700;
}

h1, .h1 {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  line-height: 1.05;
  letter-spacing: -0.005em;
}

h2, .h2 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  line-height: 1.1;
  letter-spacing: -0.005em;
}

h3, .h3 {
  font-size: var(--text-2xl);
  line-height: 1.15;
}

/* Body / long-form copy uses Times New Roman per real CM materials */
p, li, td, blockquote, .body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-100);
}

/* Italic Times for emphasis / "game changing" treatment */
em, .accent-italic {
  font-family: var(--font-body);
  font-style: italic;
}

h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--fg-1);
}
h4, .h4 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h5, .h5 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h6, .h6 {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--fg-3);
}

/* Body */
p, .body { font-size: var(--text-base); line-height: var(--leading-relaxed); margin: 0; text-wrap: pretty; }
.lead    { font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--fg-2); font-weight: var(--weight-regular); font-style: italic; }
.small   { font-size: var(--text-sm); color: var(--fg-2); }
.meta    { font-size: var(--text-xs); color: var(--fg-3); letter-spacing: var(--tracking-wide); }

/* Eyebrow — the editorial all-caps label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rust-600);
}

/* Quote / pull quote — leans into Fraunces' expressive italic */
blockquote, .pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  border-left: 3px solid var(--rust-500);
  padding-left: var(--space-5);
  margin: 0;
  text-wrap: balance;
}

/* Code */
code, .code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code { background: var(--bg-sunken); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }

/* Links */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); }

/* Selection */
::selection { background: var(--rust-200); color: var(--ink-300); }

/* Hairline divider */
hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}