/* ==========================================================================
   Joe Casabona — Web tokens (non-WordPress sites)
   "Streamlined = Spacious."

   Usage:
     <link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap" rel="stylesheet">
     <link href="/brand-tokens.css" rel="stylesheet">

   Roca One Bold is licensed for casabona.org ONLY. Every other site uses
   Young Serif as the display face. Do not load Roca anywhere else.
   ========================================================================== */

:root {
  /* ---------- Brand colors — the only three ---------- */
  --process:    #082C45;  /* navy, used instead of black */
  --streamline: #F7D677;  /* yellow accent */
  --space:      #F7F4EB;  /* cream, used instead of white */

  /* Tint ramps — 20% steps, each pre-mixed with Space cream so every value is a
     solid hex (no alpha needed). 100% = the brand color itself.
     Text safety: 100 and 80 pass AA on cream at body size; 60 is large text and
     icons only; 40 and 20 are borders, rules, and fills — never type. */
  --process-100: #082C45;
  --process-80:  #385466;
  --process-60:  #687C87;
  --process-40:  #97A4A9;
  --process-20:  #C7CCCA;

  --streamline-100: #F7D677;
  --streamline-80:  #F7DC8E;
  --streamline-60:  #F7E2A5;
  --streamline-40:  #F7E8BD;
  --streamline-20:  #F7EED4;

  /* Cream has no ramp — it is already the lightest brand value. Two tonal steps: */
  --space-darker:  #EFEADD;
  --space-lighter: #FBF9F2;

  /* Legacy aliases from the first token pass. Safe to use, not extended. */
  --process-90:    #1B3D55;
  --process-70:    #45617A;
  --process-50:    #7C90A2;
  --streamline-90: var(--streamline-80);
  --streamline-70: var(--streamline-60);
  --streamline-30: var(--streamline-20);

  /* Status — muted, tonally warm */
  --success: #5C8A3A;
  --warn:    #D89A2C;
  --danger:  #B5462E;

  /* ---------- Semantic (cream theme = default) ---------- */
  --bg:            var(--space);
  --bg-inset:      var(--space-darker);
  --surface:       var(--space-lighter);
  --field:         #FFFFFF;         /* the only permitted pure white */
  --fg:            var(--process);
  --fg-muted:      var(--process-70);
  --fg-subtle:     var(--process-50);
  --border:        var(--process-20);
  --border-strong: var(--process);
  --accent:        var(--streamline);
  --accent-fg:     var(--process);
  --accent-hover:  var(--streamline-90);

  /* Per-site knob. Tints the eyebrow rule, list markers, pattern colorway.
     Approved values: var(--streamline) | #B5462E | #5C8A3A | var(--process).
     Buttons stay --streamline on every site so CTAs never drift. */
  --site-accent: var(--streamline);

  /* ---------- Type ---------- */
  --font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Geologica', system-ui, sans-serif;
  --font-sub:     var(--font-body);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem;
  --fs-4xl: 4rem; --fs-5xl: 5.5rem;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.55; --lh-loose: 1.7;
  --tracking-eyebrow: 0.16em;
  --tracking-tight: -0.01em;
  --measure: 68ch;

  /* ---------- Space / radii / borders ---------- */
  --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;
  --section-y: var(--s-9);
  --gutter: var(--s-5);
  --container: 1120px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --bw-1: 1px; --bw-2: 2px; --bw-3: 3px;

  /* ---------- Shadows — flat is the default ---------- */
  --shadow-sm: 0 1px 2px rgba(8,44,69,0.08);
  --shadow-md: 0 6px 18px -6px rgba(8,44,69,0.18);
  --shadow-lg: 0 18px 40px -12px rgba(8,44,69,0.22);

  /* ---------- Motion — calm, no springs ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --t-fast: 140ms; --t-base: 220ms; --t-slow: 400ms;
}

/* casabona.org only */
[data-site="casabona"] {
  --font-display: 'Roca One', 'Young Serif', Georgia, serif;
}

/* ---------- Navy theme ---------- */
[data-theme="navy"] {
  --bg:            var(--process);
  --bg-inset:      var(--process-90);
  --surface:       var(--process-90);
  --field:         var(--process);
  --fg:            var(--space);
  --fg-muted:      var(--process-50);
  --fg-subtle:     var(--process-50);
  --border:        rgba(247,244,235,0.14);
  --border-strong: var(--space);
  --accent:        var(--streamline);
  --accent-fg:     var(--process);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: var(--process); --bg-inset: var(--process-90);
    --surface: var(--process-90); --field: var(--process);
    --fg: var(--space); --fg-muted: var(--process-50); --fg-subtle: var(--process-50);
    --border: rgba(247,244,235,0.14); --border-strong: var(--space);
  }
}

/* ==========================================================================
   Base elements
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;              /* Young Serif ships one weight */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-5);
  text-wrap: pretty;
}
[data-site="casabona"] h1,
[data-site="casabona"] h2,
[data-site="casabona"] h3 { font-weight: 700; }

h1 { font-size: clamp(2.5rem, 5vw, var(--fs-4xl)); }
h2 { font-size: clamp(2rem, 4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }

/* Eyebrow / section label — the only uppercase style in the system */
h4, .eyebrow {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
  margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
.lede { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--fg-muted); }
small, .caption { font-size: var(--fs-sm); color: var(--fg-muted); }
strong, b { font-weight: 700; color: var(--fg); }
em { font-style: italic; }        /* never for emphasis — bold only */

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--streamline);
  transition: color var(--t-fast) var(--ease-out),
              text-decoration-color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--fg-muted); text-decoration-color: var(--border-strong); }

:focus-visible {
  outline: var(--bw-3) solid var(--streamline);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: var(--bw-1) solid var(--border);
  margin: var(--s-8) 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.section   { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.row    { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Navy block inside a cream page */
.band-navy {
  background: var(--process);
  color: var(--space);
  --fg: var(--space);
  --fg-muted: var(--process-50);
  --surface: var(--process-90);
  --border: rgba(247,244,235,0.14);
}

/* Line pattern. Assets: pattern-process.svg (navy lines, on cream),
   pattern-space.svg (cream lines, on navy), pattern-streamline.svg (yellow).
   The art is portrait 488x961 with fine strokes — never use background-size:cover,
   which blows the strokes up into bars. Tile at ~200px wide and put text on a
   scrim layer (.pattern-scrim) so the pattern stays behind, not through, the copy.
   One or two pattern blocks per page — never tiled behind body text. */
.pattern      { background-color: var(--bg-inset); background-image: url('assets/pattern-process.svg'); background-size: 200px auto; background-repeat: repeat; }
.pattern-navy { background-color: var(--process); }
.pattern-gold { background-color: var(--process-90); background-image: url('assets/pattern-streamline.svg'); background-size: 200px auto; background-repeat: repeat; }

/* Readability scrim — wrap the content inside any pattern block in this. */
.pattern .pattern-scrim      { background: rgba(239,234,221,0.88); }
.pattern-navy .pattern-scrim { background: rgba(8,44,69,0.90); }
.pattern-gold .pattern-scrim { background: rgba(27,61,85,0.86); }

/* ==========================================================================
   Components
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
  border: none;
  border-radius: var(--r-pill);
  background: var(--streamline);
  color: var(--process);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:hover  { background: var(--streamline-90); color: var(--process); }
.btn:active { background: var(--streamline); box-shadow: inset 0 2px 6px rgba(8,44,69,0.18); }

.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: var(--bw-2) solid var(--border-strong);
  padding: calc(var(--s-3) - 2px) calc(var(--s-6) - 2px);
}
.btn-secondary:hover { background: var(--bg-inset); color: var(--fg); }

.btn-text {
  background: none; border: none; padding: var(--s-2) 0;
  color: var(--fg);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--streamline);
}
.btn-text:hover { background: none; }

.card {
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-hero { border-radius: var(--r-lg); padding: var(--s-7); }

label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--s-2); }

input[type="text"], input[type="email"], input[type="url"], textarea, select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--field);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--fg-subtle); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--streamline);
}

/* Inline email capture — the workhorse of a lead-magnet page */
.capture { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.capture input { flex: 1 1 220px; width: auto; border-radius: var(--r-pill); padding-inline: var(--s-5); }

.tag {
  display: inline-block;
  padding: 6px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  border: var(--bw-1) solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.tag-accent { background: var(--streamline); border-color: transparent; color: var(--process); }
.tag-solid  { background: var(--process); border-color: transparent; color: var(--space); }

.quote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

/* Numbered / checked list */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
.steps li { display: flex; gap: var(--s-3); align-items: flex-start; counter-increment: step; }
.steps li::before {
  content: counter(step);
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--site-accent);
  color: var(--space-lighter);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.rule-accent { border-top: var(--bw-3) solid var(--site-accent); width: 48px; margin-bottom: var(--s-4); }

.site-footer {
  border-top: var(--bw-1) solid var(--border);
  padding-block: var(--s-7);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}