/* =====================================================
   QUINZE — design tokens
   editorial · paper-and-ink · warm-casual
   ===================================================== */

:root {
  /* INK — dark surfaces (editorial verso) */
  --ink-900: #0c0e13;
  --ink-800: #14171f;
  --ink-700: #1c2030;
  --ink-600: #262a3b;
  --ink-500: #353b50;
  --ink-400: #535a73;
  --ink-300: #7e859a;
  --ink-200: #a8aeba;
  --ink-100: #cfd3dc;

  /* PAPER — light surfaces (editorial recto) */
  --paper-50:  #f7f3ea;
  --paper-100: #f1ebde;
  --paper-200: #e6dccb;
  --paper-300: #d3c5ab;
  --paper-400: #b8a684;
  --paper-700: #4f4737;
  --paper-900: #1f1a12;

  /* ACCENT */
  --crimson-500: #d83a30;   /* primary action / hot accent */
  --crimson-600: #b6261c;
  --crimson-100: #f2c8c3;

  --mustard-500: #d9a441;   /* secondary, badge */
  --teal-500:    #3a8c8c;
  --moss-500:    #5e7a3f;
  --plum-500:    #6e3a52;
  --sky-500:     #6b8ab8;

  /* SEMANTIC */
  --bg:         var(--ink-900);
  --surface:    var(--ink-800);
  --surface-2:  var(--ink-700);
  --hairline:   rgba(247, 243, 234, 0.08);
  --hairline-2: rgba(247, 243, 234, 0.16);

  --text:        var(--paper-50);
  --text-dim:    var(--ink-200);
  --text-mute:   var(--ink-300);
  --text-faint:  var(--ink-400);

  --accent:      var(--crimson-500);
  --on-accent:   var(--paper-50);

  /* INVERT pair — used by primary buttons & active selections */
  --invert-bg:   var(--paper-50);
  --invert-fg:   var(--ink-900);

  /* RADIUS */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* SHADOW */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.45);
  --tile-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.45);

  /* TYPE */
  --font-display: "Instrument Serif", "Cormorant Garamond", "Times New Roman", serif;
  --font-ui:      "Hanken Grotesk", -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* MOTION */
  --ease-out: cubic-bezier(.16,.84,.30,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --tile-spring: cubic-bezier(.5,1.6,.4,1);
}

/* ---------- reset within the device ---------- */
.screen {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}
.screen *,
.screen *::before,
.screen *::after { box-sizing: border-box; }
.screen button {
  font: inherit; color: inherit;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ---------- type primitives ---------- */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.t-display i, .t-display em {
  font-style: italic;
  color: var(--crimson-500);
}
.t-title {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.t-body {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-dim);
}
.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.hairline { background: var(--hairline); height: 1px; }

/* status bar fixes inside ios frame */
.screen :where(.ios-status-bar) { color: var(--text); }

/* ===== LIGHT (PAPER) THEME =====
   Wrap a subtree with .theme-paper to flip token cascade. */
.theme-paper {
  --bg:         var(--paper-50);
  --surface:    var(--paper-100);
  --surface-2:  var(--paper-200);

  --hairline:   rgba(31, 26, 18, 0.10);
  --hairline-2: rgba(31, 26, 18, 0.22);

  --text:       var(--paper-900);
  --text-dim:   #4f4737;
  --text-mute:  #7a715f;
  --text-faint: #a89a7c;

  --invert-bg:  var(--ink-900);
  --invert-fg:  var(--paper-50);

  --board-bg:   rgba(31, 26, 18, 0.08);

  --tile-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 1px 2px rgba(31,26,18,0.16);
  --shadow-1:    0 1px 0 rgba(31,26,18,0.05), 0 4px 14px rgba(31,26,18,0.10);
  --shadow-2:    0 1px 0 rgba(31,26,18,0.07), 0 10px 30px rgba(31,26,18,0.14);
}
.theme-paper .screen {
  background: var(--bg);
  color: var(--text);
}

/* ===== CLEAN (APPLE-LIKE) THEME — with Liquid Glass surfaces =====
   White surfaces, system sans-serif, no italic flourishes.
   Subtle pastel gradient bg + frosted glass on every surface. */
.theme-clean {
  --bg:         #f2f2f7;
  --surface:    rgba(255, 255, 255, 0.68);
  --surface-2:  rgba(255, 255, 255, 0.55);

  --hairline:   rgba(60, 60, 67, 0.08);
  --hairline-2: rgba(60, 60, 67, 0.16);

  --text:       #1d1d1f;
  --text-dim:   rgba(60, 60, 67, 0.78);
  --text-mute:  rgba(60, 60, 67, 0.60);
  --text-faint: rgba(60, 60, 67, 0.40);

  --invert-bg:  #007aff;   /* system blue */
  --invert-fg:  #ffffff;
  --accent:     #007aff;
  --crimson-500:#007aff;
  --on-accent:  #ffffff;

  --board-bg:   rgba(60, 60, 67, 0.06);

  --tile-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(60,60,67,0.10);
  --shadow-1:    0 1px 2px rgba(60,60,67,0.04), 0 8px 24px rgba(60,60,67,0.06);
  --shadow-2:    0 1px 2px rgba(60,60,67,0.05), 0 16px 40px rgba(60,60,67,0.08);

  --font-display: -apple-system, "SF Pro Display", "Hanken Grotesk", "Helvetica Neue", sans-serif;
}
.theme-clean .screen {
  /* gentle pastel mesh — sky, peach, mint — so glass has something to refract */
  background:
    radial-gradient(70% 50% at 12% 6%,  rgba(0, 122, 255, 0.20), transparent 60%),
    radial-gradient(60% 45% at 95% 18%, rgba(255, 159, 10,  0.18), transparent 60%),
    radial-gradient(70% 55% at 85% 95%, rgba(52, 199, 89,  0.18), transparent 60%),
    radial-gradient(55% 50% at 18% 90%, rgba(175,  82, 222, 0.16), transparent 60%),
    #f2f2f7;
  color: var(--text);
}
/* Frost surfaces */
.theme-clean [style*="--surface"] {
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(60, 60, 67, 0.04),
    0 8px 24px rgba(60, 60, 67, 0.06) !important;
}
/* Blue action button stays solid — no blur (keeps it crisp & high-contrast) */
.theme-clean [style*="--invert-bg"] {
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 6px 18px rgba(0, 122, 255, 0.25) !important;
}
/* Kill italic + accent on display headers */
.theme-clean .t-display {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.theme-clean .t-display i,
.theme-clean .t-display em {
  font-style: normal;
  color: inherit;
}
/* Larger radii for that iOS-native look */
.theme-clean [style*="border-radius: 12px"],
.theme-clean [style*="borderRadius: 12"] { border-radius: 16px !important; }
.theme-clean [style*="border-radius: 14px"] { border-radius: 18px !important; }

/* ===== LIQUID GLASS THEME =====
   Translucent surfaces over a colorful background.
   Glass effect is auto-applied to any element whose inline style references
   --surface (so we don't need to touch every screen). */
.theme-glass {
  --bg:         transparent;
  --surface:    rgba(255, 255, 255, 0.14);
  --surface-2:  rgba(255, 255, 255, 0.10);

  --hairline:   rgba(255, 255, 255, 0.14);
  --hairline-2: rgba(255, 255, 255, 0.30);

  --text:       #f7f3ea;
  --text-dim:   rgba(247, 243, 234, 0.78);
  --text-mute:  rgba(247, 243, 234, 0.62);
  --text-faint: rgba(247, 243, 234, 0.40);

  --invert-bg:  rgba(255, 255, 255, 0.92);
  --invert-fg:  #1a1612;

  --board-bg:   rgba(255, 255, 255, 0.08);

  --tile-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 1px 3px rgba(0,0,0,0.30);
  --shadow-1:    0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 16px rgba(0,0,0,0.20);
  --shadow-2:    0 1px 0 rgba(255,255,255,0.18) inset, 0 16px 40px rgba(0,0,0,0.30);
}
.theme-glass .screen {
  /* warm "Sunset Lagoon" gradient mesh — gives the glass something to refract */
  background:
    radial-gradient(80% 60% at 15% 8%,  rgba(216, 58, 48, 0.55), transparent 65%),
    radial-gradient(70% 55% at 95% 30%, rgba(217,164, 65, 0.55), transparent 60%),
    radial-gradient(80% 65% at 50% 95%, rgba( 58,140,140, 0.55), transparent 60%),
    radial-gradient(60% 60% at 80% 70%, rgba(110, 58, 82, 0.55), transparent 65%),
    linear-gradient(180deg, #2a1224 0%, #0e1424 100%);
  color: var(--text);
}
/* Any inline surface gets the frosted recipe */
.theme-glass [style*="--surface"] {
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
.theme-glass [style*="--invert-bg"] {
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
/* Borders that read "1px solid var(--hairline)" should turn off in glass */
.theme-glass [style*="border: 1px solid var(--hairline)"] {
  border-color: rgba(255, 255, 255, 0.14) !important;
}