/* ============================================================
   Failing Daily — Brand Tokens
   Inspiring Entrepreneurs through Failure….and Humor
   Drop this into a <style> tag (inline for artifacts) and use the
   variables below. Loads a serif display face (Playfair-style
   masthead feel) + a clean humanist sans for body/tagline.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Raw brand palette --- */
  --fd-black:     #000000; /* The signature canvas. Failing Daily is black-first. */
  --fd-white:     #FFFFFF; /* Masthead wordmark + portrait line art */
  --fd-gold:      #CA9800; /* THE accent — the tagline gold. Use sparingly. */

  /* --- Supporting neutrals (extended for usable UI) --- */
  --fd-near-black:#0A0A0A; /* Raised panels on the black canvas */
  --fd-charcoal:  #1A1A1A; /* Cards / surfaces on black */
  --fd-graphite:  #2C2C2C; /* Borders, dividers on dark */
  --fd-ash:       #8A8A8A; /* Muted/caption text on black */
  --fd-fog:       #D4D4D4; /* Secondary text on black */
  --fd-paper:     #FAFAFA; /* Light page background (light-mode use) */
  --fd-ink:       #111111; /* Body text on light backgrounds */

  /* --- Gold variants for hover/emphasis --- */
  --fd-gold-bright: #E5AC00; /* Hover / highlight */
  --fd-gold-deep:   #A57C00; /* Pressed / shadowed gold */

  /* --- Semantic aliases (prefer these in components) --- */
  --color-bg:           var(--fd-black);     /* Failing Daily is dark-first */
  --color-bg-deep:      var(--fd-black);
  --color-surface:      var(--fd-charcoal);  /* raised panel on black */
  --color-text:         var(--fd-white);
  --color-text-muted:   var(--fd-fog);
  --color-text-subtle:  var(--fd-ash);
  --color-primary:      var(--fd-gold);      /* CTAs, accents, the one bright thing */
  --color-on-primary:   var(--fd-black);
  --color-accent:       var(--fd-gold);
  --color-link:         var(--fd-gold);
  --color-link-hover:   var(--fd-gold-bright);
  --color-border:       rgba(255, 255, 255, 0.14);
  --color-divider:      rgba(255, 255, 255, 0.10);

  /* Light-mode equivalents (when a light surface is unavoidable) */
  --color-bg-light:        var(--fd-paper);
  --color-text-on-light:   var(--fd-ink);
  --color-muted-on-light:  #5A5A5A;
  --color-border-on-light: #E0E0E0;
  --color-gold-on-light:   var(--fd-gold-deep); /* gold reads better slightly deepened on white */

  /* --- Typography --- */
  --font-display: 'Lora', 'Georgia', 'PT Serif', 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --tracking-display: 0;       /* the masthead serif wants normal tracking */
  --tracking-tagline: 0.01em;  /* the gold tagline sits airy and calm */

  /* --- Radius & elevation (editorial, restrained) --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-panel: 0 10px 36px rgba(0, 0, 0, 0.55);
}

/* ---- Sensible base styles (optional; safe to keep) ---- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--color-text);
}

/* The signature "masthead" treatment: big serif headline with a gold rule
   and a gold tagline beneath — mirrors the logo lockup. Opt in per block. */
.fd-masthead {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fd-white);
  border-bottom: 3px solid var(--fd-white);
  padding-bottom: 0.15em;
  display: inline-block;
}
.fd-tagline {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--fd-gold);
  letter-spacing: var(--tracking-tagline);
  font-size: 1rem;
}

/* Eyebrow / kicker label */
.fd-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  color: var(--fd-gold);
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

.fd-btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.7em 1.5em;
  cursor: pointer;
}
.fd-btn-primary:hover { background: var(--fd-gold-bright); }

/* A ghost / secondary button: white outline on black */
.fd-btn-ghost {
  background: transparent;
  color: var(--fd-white);
  font-family: var(--font-body);
  font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  padding: 0.7em 1.5em;
  cursor: pointer;
}
.fd-btn-ghost:hover { border-color: var(--fd-gold); color: var(--fd-gold); }

.fd-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem;
}