/*
 * cefrium.com design system.
 *
 * WHY THIS FILE EXISTS: until now every page inlined its own <style>, and the same
 * palette existed in TWELVE variants across sixteen pages -- nine of them literal
 * copy-paste, one renaming every token (--panel/--ink/--cyan instead of
 * --surface/--text/--accent), one dropping --border and hardcoding #1e293b five
 * times to compensate. Changing one colour was a twelve-file edit. One stylesheet,
 * one source of truth.
 *
 * It intentionally mirrors the kiosk sample's design system
 * (cefrium-sample/kiosk-pos/app/src/main/assets/shared/cefrium.css) so a screenshot
 * of the product and the page showing it read as the same family. That is what makes
 * a site look like a product rather than a portfolio.
 *
 * No webfonts: system stacks only, as the site has always done. No image files for
 * texture -- the grain is a generated SVG mask.
 */

:root {
  color-scheme: dark;

  /* Palette. Kept compatible with the old token names so existing pages adopting
     this file do not need a rewrite, with the newer semantic names added. */
  --bg:        #05070d;
  --bg-2:      #0a0f1a;
  --surface:   #111827;
  --glass:     color-mix(in oklab, #16203a 72%, transparent);
  --border:    #1e293b;
  --line:      color-mix(in oklab, #4a6ba8 28%, transparent);

  --text:      #f2f6fc;
  --ink:       #f2f6fc;   /* alias: privacy/ used --ink */
  --muted:     #9fb0c9;
  --faint:     #64748b;

  --accent:    #4cc9f0;
  --accent2:   #7c5cff;
  --accent-2:  #7c5cff;   /* alias: both spellings exist in the tree */
  --ok:        #46e8a0;
  --warn:      #ffc857;
  --bad:       #ff6b7a;

  /* Fluid type. Everything below the hero used to be fixed rem. */
  --t-xs:   clamp(0.74rem, 0.70rem + 0.2vw, 0.84rem);
  --t-sm:   clamp(0.88rem, 0.84rem + 0.3vw, 1.00rem);
  --t-base: clamp(1.00rem, 0.95rem + 0.3vw, 1.14rem);
  --t-lg:   clamp(1.25rem, 1.10rem + 0.8vw, 1.70rem);
  --t-xl:   clamp(1.80rem, 1.35rem + 2.1vw, 2.90rem);
  --t-2xl:  clamp(2.40rem, 1.60rem + 3.8vw, 4.40rem);

  --radius:  14px;
  --r-sm:    10px;
  --r-lg:    26px;

  /* 44px is the platform minimum; buttons used to be ~42px. */
  --target:  48px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --shell: 1180px;

  /* Aliases for names older pages already used. Keeping them here is what lets
     those pages drop their private :root without a rewrite -- which was the whole
     point of this file. New pages should prefer the canonical names above. */
  --panel:    #111827;          /* = --surface  (privacy, modern-web) */
  --panel-2:  #16203a;          /* modern-web */
  --surface2: #16213e;          /* keysigning */
  --cyan:     #4cc9f0;          /* = --accent   (privacy) */
  --good:     #46e8a0;          /* = --ok       (modern-web) */
  --err:      #fecaca;  --errbg:  #7f1d1d;   /* keysigning status chips */
  --busy:     #fde68a;  --busybg: #78350f;
  --okbg:     #064e3b;

}

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

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .9em; }
:not(pre) > code {
  background: #0f172a; padding: .1em .4em; border-radius: 5px; color: var(--text);
}
pre {
  background: #0f172a; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1.1rem 1.25rem; overflow-x: auto; font-size: .9rem; line-height: 1.6;
}

/* --- backdrop -------------------------------------------------------------
 * Two fixed layers, so nothing repaints them while the page scrolls.
 */
body::before, body::after {
  content: ''; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
}
body::before {
  background:
    radial-gradient(42vw 42vw at 10% 0%,   color-mix(in oklab, var(--accent2) 34%, transparent), transparent 62%),
    radial-gradient(40vw 40vw at 92% 10%,  color-mix(in oklab, var(--accent)  30%, transparent), transparent 60%),
    radial-gradient(56vw 56vw at 55% 100%, color-mix(in oklab, #1b4bb8        32%, transparent), transparent 66%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
body::after {
  z-index: -1; opacity: .42; background: #fff; mix-blend-mode: overlay;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 160px; mask-size: 160px;
}

/* --- navigation ----------------------------------------------------------- */
.topnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: .7rem clamp(16px, 3vw, 32px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.topnav .brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; color: var(--text); letter-spacing: -.01em;
}
.topnav .brand img { width: 26px; height: 26px; }
.topnav .links {
  display: flex; gap: 1.05rem; flex-wrap: wrap; margin-left: auto;
  font-size: var(--t-sm);
}
.topnav .links a { color: var(--muted); }
.topnav .links a:hover, .topnav .links a.active { color: var(--accent); text-decoration: none; }

/* --- layout --------------------------------------------------------------- */
.shell { max-width: var(--shell); margin-inline: auto; padding: clamp(20px, 3vw, 44px); }
main   { max-width: 820px; margin-inline: auto; padding: 3rem clamp(16px, 3vw, 24px) 5rem; }

h1 {
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
}
h1.display {
  font-size: var(--t-2xl);
  background: linear-gradient(100deg, var(--text) 24%, var(--accent) 62%, var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: var(--t-base); font-weight: 700; }
p  { margin: .8rem 0; }
.lede  { color: var(--muted); font-size: var(--t-sm); }
.eyebrow {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--faint);
}
.note { color: var(--muted); font-size: var(--t-sm); }

.grid { display: grid; gap: clamp(12px, 1.5vw, 20px); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* --- surfaces ------------------------------------------------------------- */
.panel {
  position: relative; overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border-radius: var(--radius);
  padding: clamp(16px, 1.8vw, 26px);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 9%, transparent) inset,
              0 24px 60px -30px #000;
}
.panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg,
    color-mix(in oklab, #fff 30%, transparent), transparent 40%,
    color-mix(in oklab, var(--accent) 26%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* --- controls ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--target); padding: 0 1.5rem;
  font-weight: 700; font-size: var(--t-sm);
  color: #04121f; background: linear-gradient(135deg, #8fe3ff, var(--accent) 50%, #2aa8d8);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  transition: transform .14s var(--ease), filter .14s var(--ease);
  box-shadow: 0 10px 28px -14px color-mix(in oklab, var(--accent) 70%, transparent);
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: translateY(2px); }
.btn.ghost {
  color: var(--text); background: color-mix(in oklab, #fff 6%, transparent);
  box-shadow: 0 0 0 1px var(--line) inset;
}

/* --- media ---------------------------------------------------------------- */
figure { margin: 0; }
.shot {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface);
}
figcaption { color: var(--muted); font-size: var(--t-xs); margin-top: .5rem; }

/* --- tables --------------------------------------------------------------- */
table.matrix { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.matrix th, .matrix td {
  padding: .65rem .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.matrix th { color: var(--muted); font-weight: 600; }
.yes { color: var(--ok); } .no { color: var(--bad); }

/* --- motion --------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem clamp(16px, 3vw, 24px);
  text-align: center; color: var(--muted); font-size: var(--t-xs);
}
footer a { color: var(--muted); }

/* Callouts. Four pages defined these locally and identically; hoisted here so a
   new page gets the same box by adding class="callout" (plus warn/ok). */
.callout {
  border-left: 3px solid var(--accent2); background: var(--surface);
  border-radius: 0 8px 8px 0; padding: 0.9rem 1.1rem; margin: 1.25rem 0;
}
.callout.warn { border-left-color: #fbbf24; }
.callout.ok   { border-left-color: #4ade80; }
.callout p    { margin: 0.35rem 0; }
.callout ul   { margin: 0.5rem 0 0.5rem 1.25rem; }