/* ==========================================================================
   Kachak — design tokens
   Lifted from the Kachak design system (tokens/colors.css, typography.css).
   Every value here is the source of truth; nothing below hard-codes a hex.
   ========================================================================== */

:root {
  /* --- Surfaces --- */
  --bg: #faf8f4;          /* warm paper — page background */
  --bg-warm: #f1ece3;     /* gradient foot on hero / CTA bands */
  --surface: #ffffff;     /* cards, sheets */

  /* --- Ink --- */
  --ink: #16140f;         /* primary text, dark buttons */
  --ink-2: #76746e;       /* secondary text */
  --ink-3: #a8a49b;       /* tertiary / mono labels */

  /* --- Brand --- */
  --coral: #ff5a4d;       /* the one accent */
  --coral-light: #ff7468; /* logo gradient top */
  --coral-deep: #ec4a3e;  /* logo gradient foot */

  /* --- Hairlines & warm tints --- */
  --line: #ece8e1;        /* default card border */
  --line-2: #e7e4dd;      /* button border */
  --line-3: #e2ddd3;      /* input border */
  --tint: #f1ece4;        /* chips, dividers, muted tiles */
  --dashed: #dcd6cb;
  --grip: #ddd7cc;        /* sheet grab handle */
  --track: #f0ece4;       /* progress track */

  /* --- Semantic accents --- */
  --green: #3fa66b;       /* success */
  --green-toast: #5fd08a; /* toast check */
  --flash-yellow: #ffd24a;
  --notif-pink: #fce9e7;

  /* --- Dark surfaces (camera / developing / viewer) --- */
  --cam-bg: #0e0d0b;
  --dev-bot: #0c0b09;
  --viewer-bg: #0b0a08;
  --cream: #f5f2ec;       /* text on dark */

  /* --- Avatar palette --- */
  --av-sand: #b59a68;
  --av-slate: #5c7290;
  --av-rust: #874c49;
  --av-sage: #546c52;
  --av-rose: #ae6a72;

  /* --- Type --- */
  --font-sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* --- Layout --- */
  --wrap: 1180px;
  --gutter: 40px;
  --header-h: 70px;
}

/* --------------------------------------------------------------------------
   Film stocks — eight gradient pairs. Every print, cover, viewfinder and
   gallery tile is one of these, so they live as ready-made gradients.
   -------------------------------------------------------------------------- */
:root {
  --stock-amber-hi: #e8c9a0;  --stock-amber-lo: #ae7642;
  --stock-teal-hi:  #c2dad4;  --stock-teal-lo:  #5c8a84;
  --stock-rose-hi:  #e8bfc4;  --stock-rose-lo:  #ae6a72;
  --stock-olive-hi: #d4d5a6;  --stock-olive-lo: #7c7e50;
  --stock-slate-hi: #c2cedd;  --stock-slate-lo: #5c7290;
  --stock-sand-hi:  #e6d6b6;  --stock-sand-lo:  #b39a68;
  --stock-rust-hi:  #daa9a4;  --stock-rust-lo:  #874c49;
  --stock-sage-hi:  #bccbb6;  --stock-sage-lo:  #546c52;

  --film-0: radial-gradient(125% 108% at 50% -8%, var(--stock-amber-hi) 0%, var(--stock-amber-lo) 70%);
  --film-1: radial-gradient(125% 108% at 50% -8%, var(--stock-teal-hi)  0%, var(--stock-teal-lo)  70%);
  --film-2: radial-gradient(125% 108% at 50% -8%, var(--stock-rose-hi)  0%, var(--stock-rose-lo)  70%);
  --film-3: radial-gradient(125% 108% at 50% -8%, var(--stock-olive-hi) 0%, var(--stock-olive-lo) 70%);
  --film-4: radial-gradient(125% 108% at 50% -8%, var(--stock-slate-hi) 0%, var(--stock-slate-lo) 70%);
  --film-5: radial-gradient(125% 108% at 50% -8%, var(--stock-sand-hi)  0%, var(--stock-sand-lo)  70%);
  --film-6: radial-gradient(125% 108% at 50% -8%, var(--stock-rust-hi)  0%, var(--stock-rust-lo)  70%);
  --film-7: radial-gradient(125% 108% at 50% -8%, var(--stock-sage-hi)  0%, var(--stock-sage-lo)  70%);

  --brand-grad: radial-gradient(120% 115% at 50% -8%, var(--coral-light) 0%, var(--coral) 52%, var(--coral-deep) 100%);
  --grain: url("../assets/grain.png");
}

.film-0 { background-image: var(--film-0); }
.film-1 { background-image: var(--film-1); }
.film-2 { background-image: var(--film-2); }
.film-3 { background-image: var(--film-3); }
.film-4 { background-image: var(--film-4); }
.film-5 { background-image: var(--film-5); }
.film-6 { background-image: var(--film-6); }
.film-7 { background-image: var(--film-7); }

/* Real film grain, multiplied over any stock. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  mix-blend-mode: overlay;
  opacity: 0.5;
  border-radius: inherit;
  pointer-events: none;
}