/* ==========================================================================
   Cowper Publishing — Design Tokens v1.0
   Source of truth: Brand Style Guide — Visual Identity v1.0 (Notion, 2026-05-16)
   One token file, three future sites (SE / DE / PL). Do not hardcode values
   in component CSS — reference these custom properties.
   ========================================================================== */

:root {
  /* ---- Brand palette (raw values, light mode) ---- */
  --oxblood:      #4A0B14;
  --oxblood-dark: #3A0910;  /* hover state, ~20% darker */
  --ivory:        #FAF6F0;
  --aged-gold:    #B8943E;
  --deep-navy:    #1A1A2E;
  --blush:        #E8C4C4;
  --slate:        #4A4A5A;
  --black:        #1A1A1A;
  --charcoal:     #333340;
  --warm-grey:    #8A8A8A;  /* borders/dividers only — fails AA as text on ivory */
  --light-grey:   #E5E2DD;
  --white:        #FFFFFF;
  --navy-card:    #252538;
  --oxblood-soft: #8B3A4A;  /* dark-mode brand accent, per guide */

  /* ---- Semantic colors ---- */
  --success: #2D6A4F;
  --warning: #C77B1A;
  --error:   #A4161A;
  --info:    #3A6EA5;

  /* ---- Role tokens (light mode) ---- */
  --bg:            var(--ivory);
  --bg-card:       var(--white);
  --bg-band:       var(--light-grey);
  --bg-inverse:    var(--deep-navy);
  --bg-accent:     var(--oxblood);
  --text:          var(--charcoal);
  --text-strong:   var(--black);
  --text-muted:    var(--slate);
  --text-on-dark:  var(--light-grey);
  --text-on-accent:var(--ivory);
  --heading:       var(--oxblood);
  --accent:        var(--oxblood);
  --accent-hover:  var(--oxblood-dark);
  --link:          var(--oxblood);
  --link-hover:    var(--oxblood-dark);
  --success-fg:    var(--success);
  --premium:       var(--aged-gold);   /* large accents/borders only, never body text */
  --romance:       var(--blush);
  --border:        var(--light-grey);
  --border-strong: var(--warm-grey);
  --focus-ring:    var(--info);

  /* ---- Typography ----
     Cormorant Garamond: display/headlines only, never below 18px on screen.
     Inter: body, UI, forms, captions. */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (Brand Style Guide §4) */
  --fs-display-1: 3.5rem;    /* 56px  Cormorant 700  lh 1.05 */
  --fs-display-2: 2.5rem;    /* 40px  Cormorant 700  lh 1.1  */
  --fs-h1:        2rem;      /* 32px  Cormorant 600  lh 1.15 */
  --fs-h2:        1.5rem;    /* 24px  Inter 600      lh 1.25 */
  --fs-h3:        1.25rem;   /* 20px  Inter 600      lh 1.3  */
  --fs-body-lg:   1.125rem;  /* 18px  Inter 400      lh 1.6  */
  --fs-body:      1rem;      /* 16px  Inter 400      lh 1.6  */
  --fs-small:     0.875rem;  /* 14px  Inter 400      lh 1.5  */
  --fs-caption:   0.75rem;   /* 12px  Inter 500      lh 1.4  */

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-small:   1.5;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  --container: 72.5rem;         /* 1160px content column */
  --section-pad: var(--space-8);
  --section-pad-mobile: var(--space-7);
  --card-pad: var(--space-5);
  --grid-gap: var(--space-5);

  /* ---- Radius (print-like, near-square — echoes the brand's flat language) ---- */
  --radius-tight: 0px;
  --radius:       2px;
  --radius-round: 999px;

  /* ---- Elevation: the brand is flat; use borders, not shadows ---- */
  --card-border: 1px solid var(--border);
}

/* ---- Dark mode (Brand Style Guide §3, dark variants) ----
   System preference, unless the visitor chose explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--deep-navy);
    --bg-card:       var(--navy-card);
    --bg-band:       #20203A;
    --bg-inverse:    #121220;
    --bg-accent:     var(--oxblood);
    --text:          var(--light-grey);
    --text-strong:   var(--white);
    --text-muted:    #A5A5BC;
    --heading:       var(--blush);
    --accent:        var(--oxblood-soft);
    --accent-hover:  #A04B5C;
    --link:          var(--blush);
    --link-hover:    var(--white);
    --success-fg:    #7BC9A0;
    --border:        #34344C;
    --border-strong: #4A4A6A;
  }
}
/* Explicit visitor choice wins in both directions */
:root[data-theme="dark"] {
  --bg:            var(--deep-navy);
  --bg-card:       var(--navy-card);
  --bg-band:       #20203A;
  --bg-inverse:    #121220;
  --bg-accent:     var(--oxblood);
  --text:          var(--light-grey);
  --text-strong:   var(--white);
  --text-muted:    #A5A5BC;
  --heading:       var(--blush);
  --accent:        var(--oxblood-soft);
  --accent-hover:  #A04B5C;
    --link:          var(--blush);
    --link-hover:    var(--white);
    --success-fg:    #7BC9A0;
  --border:        #34344C;
  --border-strong: #4A4A6A;
}