/* The Lineup Is — design tokens, mirrored from the iOS app */

@font-face {
  font-family: 'PP Editorial New';
  src: url('../fonts/PPEditorialNew-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('../fonts/PPEditorialNew-UltraboldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('../fonts/PPEditorialNew-UltralightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Accent — terracotta */
  --terracotta: #B5715B;
  --terracotta-pressed: #9E6250;
  --terracotta-subtle: rgba(181, 113, 91, 0.12);
  --on-primary: #FEFCF9;

  /* Backgrounds */
  --bg-primary: #FAF7F2;
  --bg-secondary: #F3EDE4;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #EDE6D8;

  /* Text */
  --text-primary: #2C2825;
  --text-secondary: #6B5F54;
  --text-tertiary: #9A8E82;
  --text-disabled: #C4B9AB;

  /* Borders */
  --border-default: #E8E0D4;
  --border-subtle: #F0EAE0;
  --border-strong: #D4C9B8;

  /* System */
  --live: #C75450;
  --success: #6B8F6B;
  --warning: #C4A265;

  /* Importance score band colors */
  --imp-90: #F24545;
  --imp-80: #FA8C45;
  --imp-70: #FAC045;
  --imp-60: #FAE359;

  /* Card shadow — warm brown */
  --shadow-card: 0 1px 2px rgba(212, 201, 184, 0.35), 0 8px 24px rgba(212, 201, 184, 0.45);
  --shadow-card-strong: 0 2px 6px rgba(140, 110, 80, 0.22), 0 18px 48px rgba(140, 110, 80, 0.28);
  --shadow-device: 0 30px 80px rgba(107, 68, 35, 0.25), 0 8px 20px rgba(107, 68, 35, 0.18);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
  --font-serif: 'PP Editorial New', 'Times New Roman', Georgia, serif;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-xxl: 28px;

  /* Evening mesh palette (light / canonical) */
  --mesh-c1: #E8C97A;
  --mesh-c2: #C8943E;
  --mesh-c3: #B5722A;
  --mesh-c4: #D4A855;
  --mesh-c5: #F0D9A8;
}

/* Time-of-day palette overrides */
[data-time="morning"] {
  --mesh-c1: #FFF8EE;
  --mesh-c2: #F5DEB3;
  --mesh-c3: #EDCF9B;
  --mesh-c4: #F7E8D0;
  --mesh-c5: #FFF3E0;
}
[data-time="afternoon"] {
  --mesh-c1: #F5DEB3;
  --mesh-c2: #E8C97A;
  --mesh-c3: #D4A855;
  --mesh-c4: #F0D9A8;
  --mesh-c5: #FFF0D4;
}
[data-time="evening"] {
  --mesh-c1: #E8C97A;
  --mesh-c2: #C8943E;
  --mesh-c3: #B5722A;
  --mesh-c4: #D4A855;
  --mesh-c5: #F0D9A8;
}
[data-time="night"] {
  --mesh-c1: #A67637;
  --mesh-c2: #8B5E2B;
  --mesh-c3: #6B4423;
  --mesh-c4: #C8943E;
  --mesh-c5: #D4A855;
}

/* Accent intensity tweak */
[data-accent="soft"]    { --terracotta: #C48670; --terracotta-pressed: #B3745E; }
[data-accent="default"] { --terracotta: #B5715B; --terracotta-pressed: #9E6250; }
[data-accent="bold"]    { --terracotta: #9C5C47; --terracotta-pressed: #82493A; }

/* Base */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { font-feature-settings: "ss01", "cv11"; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.serif-bold { font-family: var(--font-serif); font-style: italic; font-weight: 800; }
.serif-light { font-family: var(--font-serif); font-style: italic; font-weight: 200; }

/* Evening mesh gradient — CSS approximation of the 3x3 mesh using layered radial gradients */
.mesh-evening {
  background-color: var(--mesh-c4);
  background-image:
    radial-gradient(ellipse 70% 60% at 20% 15%, var(--mesh-c1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 80% 18%, var(--mesh-c4) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 50%, var(--mesh-c3) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 15% 85%, var(--mesh-c5) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 88%, var(--mesh-c5) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 50% 100%, var(--mesh-c2) 0%, transparent 60%);
  transition: background-color 1.2s ease, background-image 1.2s ease;
}

/* Page-level warm radial glow */
.page-glow {
  background:
    radial-gradient(ellipse 1200px 900px at 50% 0%, #FFF3DF 0%, transparent 60%),
    radial-gradient(ellipse 900px 700px at 50% 100%, #FDF1DC 0%, transparent 55%),
    var(--bg-primary);
}

/* Common */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--terracotta);
  color: var(--on-primary);
  box-shadow: 0 2px 6px rgba(181, 113, 91, 0.25), 0 10px 28px rgba(181, 113, 91, 0.28);
}
.btn-primary:hover { background: var(--terracotta-pressed); }
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-ghost:hover { background: var(--bg-secondary); }

.link-quiet {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 2px;
  font-size: 15px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link-quiet:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}