/* ============================================================
   VALORE MAGAZINE — Colors & Type
   ------------------------------------------------------------
   A dark, masculine editorial system. Default theme is "Night":
   deep ink-blue ground, parchment type, oxblood and brandy
   accents. Think a leather-lined library at midnight; a heavy
   crystal glass; a single lamp on a walnut desk.

   The reverse theme — "Paper" — exists for print PDFs and the
   occasional daylight feature. Set .theme-paper on a wrapper.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Archivo:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     RAW PALETTE — these are color names, never used directly
     in components. Reference the semantic tokens below.
     ========================================================= */

  /* Night ground — the surfaces */
  --val-night:       #0B0D11;   /* deepest — page background */
  --val-midnight:    #11141A;   /* default surface */
  --val-slate:       #181C24;   /* raised surface */
  --val-gunmetal:    #21262F;   /* card / input fill */
  --val-iron:        #2C313B;   /* hover / pressed surface */
  --val-graphite:    #3A4049;   /* borders, divisions */
  --val-smoke:       #5A6068;   /* faint borders, disabled */

  /* Type on night */
  --val-parchment:   #E8E2D2;   /* primary type — warm off-white */
  --val-bone:        #C7BFAE;   /* secondary type */
  --val-ash:         #948D7E;   /* tertiary type, captions */
  --val-shadow:      #5A574E;   /* metadata, deeply muted */

  /* Editorial accents — deep, never neon */
  --val-oxblood:        #6B1F1C;  /* primary accent */
  --val-oxblood-deep:   #3E1110;  /* hover, pressed */
  --val-oxblood-glow:   #8B2A22;  /* hover for text links */
  --val-crimson-veil:   #2A1715;  /* deep mahogany tint */

  /* Premium accents */
  --val-brandy:         #A37C3C;  /* gold, slightly desaturated for dark */
  --val-brandy-soft:    #C49B5D;
  --val-brandy-deep:    #6E5325;
  --val-brandy-veil:    #1F1A12;  /* gold tint on dark */

  /* Tertiary accent — navy / steel */
  --val-navy:           #1F2A38;
  --val-navy-soft:      #2E4054;
  --val-navy-deep:      #131A23;

  /* Earth — for warmth */
  --val-mahogany:       #2A1715;
  --val-walnut:         #3A2A1F;
  --val-cognac:         #5C3A1E;

  /* Signal — kept muted */
  --val-success:    #6B8A4A;
  --val-warning:    #B58838;
  --val-danger:     #9A2F26;

  /* Pure paper (light-mode swatch and print PDFs) */
  --val-paper:       #F4EFE6;
  --val-linen:       #E8E1D3;
  --val-ink-900:     #0F0E0C;
  --val-ink-700:     #2C2A26;

  /* =========================================================
     TYPE FAMILIES
     ========================================================= */
  --val-font-display:   'Fraunces', 'Bodoni Moda', 'Didot', Georgia, serif;
  --val-font-editorial: 'Fraunces', 'EB Garamond', Garamond, Georgia, serif;
  --val-font-sans:      'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --val-font-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* =========================================================
     TYPE SCALE (modular, 1.250 minor third)
     ========================================================= */
  --val-text-2xs:   0.6875rem; /* 11 */
  --val-text-xs:    0.75rem;   /* 12 */
  --val-text-sm:    0.875rem;  /* 14 */
  --val-text-base:  1rem;      /* 16 */
  --val-text-md:    1.125rem;  /* 18 */
  --val-text-lg:    1.375rem;  /* 22 */
  --val-text-xl:    1.75rem;   /* 28 */
  --val-text-2xl:   2.25rem;   /* 36 */
  --val-text-3xl:   3rem;      /* 48 */
  --val-text-4xl:   4rem;      /* 64 */
  --val-text-5xl:   5.5rem;    /* 88 */
  --val-text-6xl:   7.5rem;    /* 120 */

  --val-w-light:    300;
  --val-w-regular:  400;
  --val-w-medium:   500;
  --val-w-semibold: 600;
  --val-w-bold:     700;

  /* =========================================================
     SPACING (8-pt soft grid)
     ========================================================= */
  --val-s-0:    0;
  --val-s-1:    0.25rem;
  --val-s-2:    0.5rem;
  --val-s-3:    0.75rem;
  --val-s-4:    1rem;
  --val-s-5:    1.5rem;
  --val-s-6:    2rem;
  --val-s-7:    3rem;
  --val-s-8:    4rem;
  --val-s-9:    6rem;
  --val-s-10:   8rem;

  /* =========================================================
     RADIUS — kept tight; luxury reads as sharp
     ========================================================= */
  --val-r-none: 0;
  --val-r-xs:   2px;
  --val-r-sm:   4px;
  --val-r-md:   6px;
  --val-r-pill: 999px;

  /* =========================================================
     HAIRLINES & RULES
     ========================================================= */
  --val-rule:        1px solid var(--val-parchment);
  --val-rule-light:  1px solid var(--val-graphite);
  --val-rule-thick:  2px solid var(--val-parchment);
  --val-rule-double: 3px double var(--val-parchment);

  /* =========================================================
     SHADOWS — darker, deeper, never coloured.
     On dark backgrounds shadows are mostly used for inner
     glow / bevel and for floating menus.
     ========================================================= */
  --val-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --val-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
  --val-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55);
  --val-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.65);

  /* Inner bevel — subtle highlight on raised surfaces */
  --val-bevel:     inset 0 1px 0 rgba(255, 255, 255, 0.04),
                   inset 0 -1px 0 rgba(0, 0, 0, 0.50);

  /* =========================================================
     MOTION
     ========================================================= */
  --val-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --val-ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --val-dur-fast:       160ms;
  --val-dur-base:       240ms;
  --val-dur-slow:       480ms;
  --val-dur-page:       720ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --val-col-narrow:  36rem;
  --val-col-text:    44rem;
  --val-col-wide:    68rem;
  --val-col-bleed:   90rem;
  --val-gutter:      var(--val-s-7);

  /* =========================================================
     SEMANTIC TOKENS — components reference THESE
     ========================================================= */

  --fg:           var(--val-parchment);
  --fg-muted:     var(--val-bone);
  --fg-faint:     var(--val-ash);
  --fg-deep:      var(--val-shadow);
  --fg-inverse:   var(--val-night);
  --fg-accent:    var(--val-brandy-soft);
  --fg-editorial: var(--val-oxblood-glow);

  --bg:           var(--val-night);
  --bg-surface:   var(--val-midnight);
  --bg-raised:    var(--val-slate);
  --bg-sunken:    var(--val-night);
  --bg-inverse:   var(--val-parchment);
  --bg-accent:    var(--val-crimson-veil);
  --bg-premium:   var(--val-brandy-veil);

  --border:        var(--val-graphite);
  --border-strong: var(--val-parchment);
  --border-faint:  var(--val-iron);

  /* Editorial roles */
  --eyebrow-color:   var(--val-brandy-soft);
  --rule-color:      var(--val-parchment);
  --dropcap-color:   var(--val-oxblood-glow);
  --pullquote-color: var(--val-parchment);
}

/* ============================================================
   PAPER theme — for print PDFs and the occasional daylight
   feature. Apply .theme-paper on any wrapper.
   ============================================================ */
.theme-paper {
  --fg:         var(--val-ink-900);
  --fg-muted:   #2C2A26;
  --fg-faint:   #5A554C;
  --fg-deep:    #8B857A;
  --fg-inverse: var(--val-paper);
  --fg-accent:  var(--val-oxblood);

  --bg:         var(--val-paper);
  --bg-surface: var(--val-linen);
  --bg-raised:  #FFFFFF;
  --bg-sunken:  var(--val-paper);
  --bg-inverse: var(--val-night);
  --bg-accent:  #F0E0DC;
  --bg-premium: #F1E7D3;

  --border:        var(--val-linen);
  --border-strong: var(--val-ink-900);
  --border-faint:  #D8D1C2;

  --eyebrow-color:   var(--val-oxblood);
  --rule-color:      var(--val-ink-900);
  --dropcap-color:   var(--val-oxblood);
  --pullquote-color: var(--val-ink-900);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
.val-masthead {
  font-family: var(--val-font-display);
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-6xl);
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--fg);
  font-variation-settings: 'opsz' 96;
}

.val-h1, h1.val {
  font-family: var(--val-font-display);
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-4xl);
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--fg);
  text-wrap: balance;
  font-variation-settings: 'opsz' 72;
}

.val-h2, h2.val {
  font-family: var(--val-font-display);
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-3xl);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--fg);
  text-wrap: balance;
}

.val-h3, h3.val {
  font-family: var(--val-font-display);
  font-weight: var(--val-w-medium);
  font-size: var(--val-text-2xl);
  line-height: 1.1;
  color: var(--fg);
  text-wrap: balance;
}

.val-h4, h4.val {
  font-family: var(--val-font-sans);
  font-weight: var(--val-w-medium);
  font-size: var(--val-text-md);
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--fg);
}

.val-eyebrow {
  font-family: var(--val-font-sans);
  font-weight: var(--val-w-medium);
  font-size: var(--val-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eyebrow-color);
}

.val-standfirst {
  font-family: var(--val-font-editorial);
  font-style: italic;
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-lg);
  line-height: 1.45;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.val-body, p.val {
  font-family: var(--val-font-editorial);
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-md);
  line-height: 1.75;
  color: var(--fg);
  text-wrap: pretty;
}

.val-ui {
  font-family: var(--val-font-sans);
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-base);
  line-height: 1.5;
  color: var(--fg);
}

.val-caption {
  font-family: var(--val-font-sans);
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-xs);
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--fg-faint);
}

.val-byline {
  font-family: var(--val-font-sans);
  font-weight: var(--val-w-medium);
  font-size: var(--val-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.val-pullquote {
  font-family: var(--val-font-display);
  font-weight: var(--val-w-light);
  font-style: italic;
  font-size: var(--val-text-2xl);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--pullquote-color);
  text-wrap: balance;
}

.val-mono {
  font-family: var(--val-font-mono);
  font-weight: var(--val-w-regular);
  font-size: var(--val-text-sm);
  letter-spacing: 0;
}

.val-dropcap::first-letter {
  font-family: var(--val-font-display);
  font-weight: var(--val-w-regular);
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding: 0.05em 0.12em 0 0;
  color: var(--dropcap-color);
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--val-font-sans);
  font-size: var(--val-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--val-oxblood);
  color: var(--val-parchment);
}