/**
 * Plenilunium - Design System
 * Vintage French Newspaper Aesthetic
 *
 * Usage: @import url('/shared/css/design-system.css');
 */

/* ===========================================
   FONTS (Google Fonts)
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IM+Fell+English:ital@0;1&family=Pirata+One&display=swap');

/* ===========================================
   CSS VARIABLES - Design Tokens
   =========================================== */

:root {
  /* --- Colors: Vintage Paper Palette --- */
  --color-paper:          #f5f0e6;    /* Aged paper background */
  --color-paper-dark:     #e8e0d0;    /* Darker paper (accents) */
  --color-paper-cream:    #faf8f3;    /* Lighter cream */

  --color-ink:            #2c2416;    /* Dark brown/black ink */
  --color-ink-light:      #4a3f2f;    /* Lighter ink for body */
  --color-ink-faded:      #6b5d4d;    /* Faded text */

  --color-accent:         #8b4513;    /* Saddle brown - headlines */
  --color-accent-dark:    #5c2e0a;    /* Darker accent */
  --color-rust:           #a0522d;    /* Sienna - decorative */

  --color-rule:           #c4b69c;    /* Decorative lines */
  --color-rule-dark:      #8b7355;    /* Darker rules */

  /* --- Typography --- */
  --font-headline:        'Playfair Display', Georgia, serif;
  --font-body:            'Libre Baskerville', 'Times New Roman', serif;
  --font-accent:          'IM Fell English', Georgia, serif;
  --font-gothic:          'Pirata One', 'Old English Text MT', serif;

  /* --- Font Sizes (modular scale 1.25) --- */
  --text-xs:              0.64rem;    /* 10.24px */
  --text-sm:              0.8rem;     /* 12.8px */
  --text-base:            1rem;       /* 16px */
  --text-lg:              1.25rem;    /* 20px */
  --text-xl:              1.563rem;   /* 25px */
  --text-2xl:             1.953rem;   /* 31.25px */
  --text-3xl:             2.441rem;   /* 39px */
  --text-4xl:             3.052rem;   /* 48.8px */
  --text-5xl:             3.815rem;   /* 61px */

  /* --- Font Weights --- */
  --font-normal:          400;
  --font-bold:            700;
  --font-black:           900;

  /* --- Line Heights --- */
  --leading-tight:        1.2;
  --leading-snug:         1.35;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  /* --- Spacing (8px base) --- */
  --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-8:              3rem;       /* 48px */
  --space-10:             4rem;       /* 64px */
  --space-12:             6rem;       /* 96px */

  /* --- Column Layout --- */
  --column-gap:           var(--space-5);
  --column-rule:          1px solid var(--color-rule);

  /* --- Borders & Decorations --- */
  --border-thin:          1px solid var(--color-rule);
  --border-medium:        2px solid var(--color-rule-dark);
  --border-thick:         3px double var(--color-ink);

  /* --- Shadows (subtle, paper-like) --- */
  --shadow-paper:         2px 2px 4px rgba(44, 36, 22, 0.1);
  --shadow-lifted:        4px 4px 8px rgba(44, 36, 22, 0.15);

  /* --- Transitions --- */
  --transition-fast:      150ms ease;
  --transition-normal:    300ms ease;
}

/* ===========================================
   BASE STYLES
   =========================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-light);
  background-color: var(--color-paper);
  margin: 0;
  padding: 0;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

/* Headlines */
h1, h2, h3, h4, h5, h6,
.headline {
  font-family: var(--font-headline);
  font-weight: var(--font-black);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-3) 0;
}

h1, .headline-1 { font-size: var(--text-5xl); }
h2, .headline-2 { font-size: var(--text-4xl); }
h3, .headline-3 { font-size: var(--text-3xl); }
h4, .headline-4 { font-size: var(--text-2xl); }
h5, .headline-5 { font-size: var(--text-xl); }
h6, .headline-6 { font-size: var(--text-lg); }

/* Masthead (newspaper title) */
.masthead {
  font-family: var(--font-headline);
  font-size: var(--text-5xl);
  font-weight: var(--font-black);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: center;
}

/* Subheadlines */
.subheadline {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-ink-faded);
}

/* Body text */
p {
  margin: 0 0 var(--space-4) 0;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.small {
  font-size: var(--text-sm);
}

.caption {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-ink-faded);
}

/* Drop cap (first letter) */
.drop-cap::first-letter {
  font-family: var(--font-headline);
  font-size: var(--text-5xl);
  font-weight: var(--font-black);
  float: left;
  line-height: 0.8;
  margin: 0.1em 0.15em 0 0;
  color: var(--color-accent);
}

/* ===========================================
   NEWSPAPER LAYOUT
   =========================================== */

/* Multi-column layout */
.columns-2 {
  column-count: 2;
  column-gap: var(--column-gap);
  column-rule: var(--column-rule);
}

.columns-3 {
  column-count: 3;
  column-gap: var(--column-gap);
  column-rule: var(--column-rule);
}

.columns-4 {
  column-count: 4;
  column-gap: var(--column-gap);
  column-rule: var(--column-rule);
}

/* Prevent column breaks */
.no-break {
  break-inside: avoid;
}

/* ===========================================
   DECORATIVE ELEMENTS
   =========================================== */

/* Horizontal rules */
hr,
.rule {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-5) 0;
}

.rule--thick {
  border-top: var(--border-thick);
}

.rule--ornate {
  border: none;
  height: 20px;
  background:
    linear-gradient(var(--color-rule-dark), var(--color-rule-dark)) center/100% 1px no-repeat,
    radial-gradient(circle, var(--color-rule-dark) 2px, transparent 2px) center/20px 20px;
}

/* Section dividers */
.section-divider {
  text-align: center;
  margin: var(--space-6) 0;
}

.section-divider::before {
  content: "§";
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--color-rule-dark);
}

/* Boxed content */
.box {
  border: var(--border-medium);
  padding: var(--space-4);
  background: var(--color-paper-cream);
}

.box--accent {
  border-color: var(--color-accent);
}

/* ===========================================
   NEWSPAPER SPECIFIC COMPONENTS
   =========================================== */

/* Edition info (date, issue number) */
.edition-info {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--color-ink-faded);
  letter-spacing: 0.05em;
}

/* Breaking news banner */
.breaking-news {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  overflow: hidden;
}

.breaking-news__text {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Price tag */
.price-tag {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-style: italic;
}

/* Footer signature */
.footer-signature {
  font-family: var(--font-accent);
  font-style: italic;
  text-align: center;
  color: var(--color-ink-faded);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-thin);
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Text alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

/* Font families */
.font-headline { font-family: var(--font-headline); }
.font-body     { font-family: var(--font-body); }
.font-accent   { font-family: var(--font-accent); }

/* Font styles */
.italic    { font-style: italic; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.smallcaps { font-variant: small-caps; }

/* Colors */
.text-ink       { color: var(--color-ink); }
.text-ink-light { color: var(--color-ink-light); }
.text-faded     { color: var(--color-ink-faded); }
.text-accent    { color: var(--color-accent); }

.bg-paper       { background-color: var(--color-paper); }
.bg-paper-dark  { background-color: var(--color-paper-dark); }
.bg-paper-cream { background-color: var(--color-paper-cream); }

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }

.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
  }

  .columns-3,
  .columns-4 {
    column-count: 2;
  }

  .masthead {
    font-size: var(--text-4xl);
    letter-spacing: 0.1em;
  }
}

@media (max-width: 480px) {
  .columns-2,
  .columns-3,
  .columns-4 {
    column-count: 1;
  }

  .masthead {
    font-size: var(--text-3xl);
  }
}