/*
 * 2222 theme pack
 * Modeled on rsvp.222.place: a dark, grain-textured ground, cream ink and
 * light-weight Crimson Pro. 222 uses a muted green; 2222 uses burnt orange.
 * Everything comes from --hue / --sat, so the palette can be adjusted in one place.
 *
 * Load order: theme.css, then style.css (app-specific layout).
 */

/* ---------- Fonts (Crimson Pro, SIL OFL 1.1, see fonts/OFL.txt) ---------- */
@font-face{font-family:"Crimson Pro";src:url(fonts/CrimsonPro-Variable.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(fonts/CrimsonPro-Italic-Variable.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;

  /* Brand knobs. 222's green is roughly hue 128 at 15% saturation. */
  --hue:18;
  --sat:64%;

  /* Ground ramp, darkest to lightest (222: darkGreen, green to green4) */
  --ground-0:hsl(var(--hue) var(--sat) 8%);   /* deepest, behind sheets */
  --ground-1:hsl(var(--hue) var(--sat) 11%);  /* page bottom */
  --ground-2:hsl(var(--hue) var(--sat) 14%);  /* page top */
  --ground-3:hsl(var(--hue) calc(var(--sat) * .85) 17%); /* raised */
  --ground-4:hsl(var(--hue) calc(var(--sat) * .8) 21%);  /* button fill */
  --ground-5:hsl(var(--hue) calc(var(--sat) * .7) 27%);  /* hover / active */

  /* Ink: 222's warm cream (#ffffdf) with alpha steps */
  --cream:#ffffdf;
  --cream-bright:#ffffef;
  --ink:var(--cream);
  --ink-2:rgb(255 255 223 / .7);   /* secondary */
  --ink-3:rgb(255 255 223 / .5);   /* tertiary, placeholders */
  --ink-4:rgb(255 255 223 / .4);
  --veil-1:rgb(255 255 223 / .04);
  --veil-2:rgb(255 255 223 / .1);  /* subtle fills, hairlines */
  --veil-3:rgb(255 255 223 / .25); /* card borders */
  --veil-4:rgb(255 255 223 / .5);  /* highlighted borders */
  --line:hsl(var(--hue) calc(var(--sat) * .35) 30%); /* opaque divider (222: #475143) */
  --muted:hsl(var(--hue) calc(var(--sat) * .3) 62%); /* warm grey text (222: #919782) */

  /* Accents */
  --accent:hsl(calc(var(--hue) + 4) 100% 62%);      /* bright orange for emphasis */
  --accent-soft:hsl(calc(var(--hue) + 4) 100% 62% / .16);
  --highlight:#faff15;  /* 222's "important" yellow */
  --positive:#7fcf5a;
  --danger:#ff7b6b;

  /* Grain: a generated fractal-noise tile, standing in for 222's noise.png */
  --grain: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .87 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --bg-page:linear-gradient(180deg,var(--ground-2),var(--ground-1));
  --bg-surface:var(--grain),linear-gradient(180deg,var(--ground-3),var(--ground-2));
  --bg-surface-deep:var(--grain),linear-gradient(180deg,var(--ground-1),var(--ground-0));
  --bg-sheen:var(--grain),linear-gradient(68deg,var(--ground-4),var(--ground-2)); /* 222 .info_block */

  /* Shape */
  --r-sm:10px;
  --r-md:15px;
  --r-lg:20px;
  --r-pill:999px;
  --glow:0 0 15px 22px var(--veil-1),0 0 10px 10px rgb(255 255 223 / .07); /* 222 shadow-twotwotwo */
  --shadow:0 4px 8px rgb(0 0 0 / .18);

  /* Type */
  --font:"Crimson Pro",ui-serif,Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Base ---------- */
html{
  color:var(--ink);
  background-color:var(--ground-1);
  background-image:var(--grain),var(--bg-page);
  background-attachment:fixed;
  min-height:100%;
}
body{
  font-family:var(--font);
  font-weight:300;
  font-size:17px;
  line-height:1.45;
  color:var(--ink);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--ground-0)}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--veil-3)}
a:hover{text-decoration-color:var(--veil-4)}
code,kbd,pre{font-family:var(--font-mono);font-size:.85em}
hr{border:0;border-top:1px solid var(--veil-3);margin:20px auto;width:75%}

/* ---------- Type scale (names follow 222's) ---------- */
.type-display{font-size:40px;font-weight:500;letter-spacing:-.96px;line-height:1.1}
.type-title{font-size:35px;font-weight:500;line-height:1.15}
.type-title-italic{font-size:25px;font-weight:200;font-style:italic;line-height:1.2}
.type-header{font-size:32px;font-weight:300;font-style:italic;letter-spacing:-.64px;line-height:1.15}
.type-subhead{font-size:20.5px;font-weight:200;font-style:italic;letter-spacing:-.16px;color:var(--ink-3)}
.type-important{font-size:16px;font-weight:400;font-style:italic;color:var(--accent)}
.type-body-lg{font-size:18px;font-weight:200;letter-spacing:-.34px}
.type-body-lg-italic{font-size:18px;font-weight:500;font-style:italic;letter-spacing:-.48px}
.type-body{font-size:16px;font-weight:300}
.type-small{font-size:15px;font-weight:200}
.type-small-muted{font-size:15px;font-weight:200;color:var(--ink-3)}
.type-label{font-size:13px;font-weight:400;font-style:italic;color:var(--ink-3);letter-spacing:.01em}
.italic{font-style:italic}

/* ---------- Surfaces ---------- */
.surface{border:1px solid var(--veil-3);border-radius:var(--r-lg);background:var(--bg-surface);box-shadow:var(--shadow)}
.surface-current{border-color:var(--cream);background:var(--bg-surface-deep)}
.surface-sheen{border-radius:var(--r-sm);background:var(--bg-sheen)}
.surface-glow{box-shadow:var(--glow)}
.surface-veil{border-radius:var(--r-sm);background:var(--veil-2)}

/* ---------- Controls ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:17px;font-weight:300;line-height:1;
  color:var(--ink);background:var(--ground-4);
  border:0;border-radius:var(--r-md);
  box-shadow:inset 0 0 0 .8px var(--veil-4);
  padding:11px 20px 12px;cursor:pointer;text-decoration:none;
  transition:background-color .15s,box-shadow .15s,opacity .15s;
}
.btn:hover{background:var(--ground-5)}
.btn:active{background:var(--ground-5);box-shadow:inset 0 0 0 .8px var(--cream)}
.btn:disabled{opacity:.45;cursor:default}
.btn-primary{background:var(--cream);color:var(--ground-1);box-shadow:none;font-weight:500}
.btn-primary:hover{background:var(--cream-bright)}
.btn-accent{background:var(--accent);color:var(--ground-0);box-shadow:none;font-weight:500}
.btn-accent:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 .5px var(--veil-3)}
.btn-ghost:hover{background:var(--veil-2)}
.btn-pill{border-radius:var(--r-pill);padding:7px 16px 8px}
:where(.btn,a,input,select,button,summary):focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}

.field{
  display:block;width:100%;font:inherit;font-size:22px;font-weight:300;
  color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:10px 0;outline:none;
}
.field::placeholder{color:var(--ink-4)}
.field:focus{border-bottom-color:var(--veil-4)}
.field:focus::placeholder{color:transparent}
.select{appearance:none;-webkit-appearance:none;font:inherit;color:var(--ink);background:var(--veil-2);border:1px solid var(--veil-3);border-radius:var(--r-sm);padding:8px 14px}

.chip{display:inline-block;font-size:13px;font-weight:400;font-style:italic;line-height:1.4;color:var(--ink-2);border:1px solid var(--veil-3);border-radius:var(--r-pill);padding:1px 10px 2px;white-space:nowrap}
.chip-accent{color:var(--accent);border-color:currentColor}
.chip-solid{color:var(--ground-1);background:var(--cream);border-color:var(--cream)}

.divider{border:0;border-top:.5px solid var(--cream);margin:0;width:auto}
.divider-center{display:block;width:75%;margin:20px auto;border:0;border-bottom:1px solid var(--cream)}
.row{display:flex;justify-content:space-between;gap:12px;padding:10px;font-weight:200}

@keyframes theme-spin{to{transform:rotate(1turn)}}
.spin{animation:theme-spin 3s linear infinite}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}