/* ═══════════════════════════════════════════════════════════════════════════
   CHIKARA OS · materials.css
   The four canonical materials: Vellum · Obsidian · Gamazine · Polished Gold
   Also defines: ambient atmosphere, depth, specular light, texture assets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · MATERIAL TOKENS ───────────────────────────────────────────────── */

:root {
  /* Z-INDEX LAYERING (spec §6) — one authority for every stacking context */
  --layer-ambient:      0;   /* L0 · environmental wash */
  --layer-gamazine:     1;   /* L1 · mineral substrate */
  --layer-surface:      2;   /* L2 · vellum / obsidian / glass surfaces */
  --layer-panel:        3;   /* L3 · cards, panels, overlays */
  --layer-vector:       4;   /* L4 · canonical CHIKARA vectors */
  --layer-interactive:  5;   /* L5 · gold highlights, focus, active */
  --layer-transient:    6;   /* L6 · notifications, toasts, launch */

  /* ── VELLUM ── warm ivory architectural surface */
  --vellum-0: #FFFBEF;   /* lifted — card tops */
  --vellum-1: #F7F3E8;   /* base — screen background */
  --vellum-2: #EFE8D6;   /* raised */
  --vellum-3: #E4D9BE;   /* pressed / deep well */
  --vellum-4: #D3C3A0;   /* hairline edge */
  --vellum-ink: #1F1A16;

  /* ── OBSIDIAN ── deep black volcanic / glass */
  --obsidian-0: #1F181B; /* lifted */
  --obsidian-1: #141014; /* base — screen background */
  --obsidian-2: #0A0708; /* deep */
  --obsidian-3: #050304; /* well */
  --obsidian-4: #2C2428; /* hairline edge */
  --obsidian-ink: #F6F0E2;

  /* ── POLISHED GOLD ── machined, precious, luxury-watch detail */
  --gold-0: #F4D98A;     /* glint — specular peak */
  --gold-1: #E5BE6A;     /* light */
  --gold-2: #C9973A;     /* base — primary accent */
  --gold-3: #96702A;     /* deep */
  --gold-4: #5E4416;     /* shadow root */
  --gold-spec: linear-gradient(
      115deg,
      #5E4416 0%,
      #96702A 14%,
      #C9973A 30%,
      #F4D98A 42%,
      #E5BE6A 50%,
      #C9973A 60%,
      #96702A 76%,
      #E5BE6A 88%,
      #5E4416 100%);
  --gold-spec-size: 340% 100%;
  --gold-band: linear-gradient(
      180deg,
      #E5BE6A 0%,
      #C9973A 34%,
      #96702A 70%,
      #5E4416 100%);
  --gold-hair: linear-gradient(
      90deg,
      transparent 0%,
      rgba(201,151,58,0) 12%,
      rgba(201,151,58,.55) 42%,
      rgba(244,217,138,.9) 50%,
      rgba(201,151,58,.55) 58%,
      rgba(201,151,58,0) 88%,
      transparent 100%);

  /* ── TEXT (Vellum theme) ── */
  --ink-1: #1F1A16;
  --ink-2: #4A3F36;
  --ink-3: #786A5C;
  --ink-4: #A39484;

  /* ── TEXT (Obsidian theme) ── */
  --light-1: #F6F0E2;
  --light-2: rgba(246,240,226,.70);
  --light-3: rgba(246,240,226,.44);
  --light-4: rgba(246,240,226,.22);

  /* ── DEEP ATMOSPHERE ── burgundy as a tonal ingredient in Gamazine, never
     as a primary interactive accent. */
  --burgundy-atm:  #8B1E3D;
  --burgundy-deep: #5A0F1F;

  /* ── GAMAZINE · mineral mesh sweep ──
     A restrained, CHIKARA-native sweep. Deep burgundy, gold, and obsidian
     rotate slowly. This is used as an atmospheric wash — never behind
     application icons. */
  --gamazine-mesh:
    linear-gradient(
      135deg,
      #14100E 0%,
      #3A1A18 12%,
      #6B4A10 24%,
      #96702A 36%,
      #C9973A 46%,
      #6B4A10 56%,
      #3A1A25 68%,
      #5A0F1F 80%,
      #14100E 100%);
  --gamazine-mesh-size: 420% 420%;
  --gamazine-sweep-dur: 44s;

  /* ── MOTION ── */
  --ease-material:  cubic-bezier(.25,.46,.45,.94);
  --ease-architect: cubic-bezier(.16,1,.3,1);
  --ease-spring:    cubic-bezier(.34,1.4,.5,1);
  --ease-in-quiet:  cubic-bezier(.4,0,.2,1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;
  --dur-sweep: 44s;

  /* ── RADII ── restrained, architectural. Not overly rounded. */
  --r-hair: 2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── SHADOW MODEL ── physical, directional (light from above-left) */
  --sh-hair:   0 1px 0 rgba(31,26,22,.06);
  --sh-low:    0 1px 2px rgba(31,26,22,.05), 0 2px 8px rgba(31,26,22,.04);
  --sh-mid:    0 2px 4px rgba(31,26,22,.06), 0 8px 22px rgba(31,26,22,.06);
  --sh-high:   0 4px 10px rgba(31,26,22,.08), 0 18px 44px rgba(31,26,22,.10);
  --sh-lift:   0 6px 14px rgba(31,26,22,.10), 0 26px 60px rgba(31,26,22,.14);
  --sh-gold:   0 4px 12px rgba(150,112,42,.22), 0 12px 30px rgba(150,112,42,.16);
  --sh-inset:  inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(31,26,22,.04);
  --sh-inset-d:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5);

  /* ── HAIRLINE (1px physical separators) ── */
  --hr-vellum:   rgba(31,26,22,.075);
  --hr-obsidian: rgba(246,240,226,.075);

  /* ── TEXTURE ASSETS (embedded SVG — no network cost) ── */

  /* Vellum grain · fine mineral turbulence, warm */
  --tex-vel-grain:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' seed='17' stitchTiles='stitch'/><feDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.6'><feDistantLight azimuth='38' elevation='58'/></feDiffuseLighting></filter><rect width='340' height='340' filter='url(%23g)'/></svg>");

  /* Obsidian grain · coarser volcanic variation */
  --tex-obs-grain:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='380' height='380'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' seed='23' stitchTiles='stitch'/><feDiffuseLighting lighting-color='%23ffffff' surfaceScale='2.4'><feDistantLight azimuth='60' elevation='48'/></feDiffuseLighting></filter><rect width='380' height='380' filter='url(%23g)'/></svg>");

  /* Gamazine substrate · layered mineral — used at very low opacity */
  --tex-gam-substrate:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' seed='41' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.60  0 0 0 0 0.22  0 0 0 0.9 0'/></filter><rect width='420' height='420' filter='url(%23g)'/></svg>");
}

/* ─── 2 · THEME APPLICATION ─────────────────────────────────────────────── */

/* Vellum theme — default. */
html[data-theme="vellum"] {
  --surface-bg:      var(--vellum-1);
  --surface-lift:    var(--vellum-0);
  --surface-raise:   var(--vellum-2);
  --surface-deep:    var(--vellum-3);
  --surface-edge:    var(--vellum-4);
  --text-primary:    var(--ink-1);
  --text-secondary:  var(--ink-2);
  --text-muted:      var(--ink-3);
  --text-stone:      var(--ink-4);
  --hairline:        var(--hr-vellum);
  --accent:          var(--gold-2);
  --accent-hi:       var(--gold-1);
  --accent-glow:     rgba(201,151,58,.18);
  --material-grain:  var(--tex-vel-grain);
  --material-grain-op:.14;
  --mesh-op:         .07;
  --shadow-1:        var(--sh-low);
  --shadow-2:        var(--sh-mid);
  --shadow-3:        var(--sh-high);
  --shadow-lift:     var(--sh-lift);
  --glass-bg:        rgba(255,251,239,.72);
  --glass-brd:       rgba(31,26,22,.08);
  --glass-blur:      16px;
}

/* Obsidian theme — dark. */
html[data-theme="obsidian"] {
  --surface-bg:      var(--obsidian-1);
  --surface-lift:    var(--obsidian-0);
  --surface-raise:   var(--obsidian-2);
  --surface-deep:    var(--obsidian-3);
  --surface-edge:    var(--obsidian-4);
  --text-primary:    var(--light-1);
  --text-secondary:  var(--light-2);
  --text-muted:      var(--light-3);
  --text-stone:      var(--light-4);
  --hairline:        var(--hr-obsidian);
  --accent:          var(--gold-1);
  --accent-hi:       var(--gold-0);
  --accent-glow:     rgba(229,190,106,.22);
  --material-grain:  var(--tex-obs-grain);
  --material-grain-op:.22;
  --mesh-op:         .16;
  --shadow-1:        0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-2:        0 2px 6px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.4);
  --shadow-3:        0 6px 16px rgba(0,0,0,.6), 0 24px 52px rgba(0,0,0,.5);
  --shadow-lift:     0 10px 24px rgba(0,0,0,.65), 0 32px 70px rgba(0,0,0,.55);
  --glass-bg:        rgba(31,24,27,.55);
  --glass-brd:       rgba(246,240,226,.09);
  --glass-blur:      20px;
}

/* ─── 3 · ROOT SURFACE — ambient light + gamazine atmosphere ────────────── */

html,
body {
  background-color: var(--surface-bg);
  color: var(--text-primary);
}

/* Layer 0 — ambient radial wash. Warm on vellum, deep burgundy on obsidian. */
html[data-theme="vellum"]  body::before,
html[data-theme="obsidian"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--layer-ambient);
  pointer-events: none;
}

html[data-theme="vellum"] body::before {
  background:
    radial-gradient(120% 90% at 12% -10%,
      rgba(201,151,58,.10) 0%,
      transparent 52%),
    radial-gradient(120% 90% at 92% 6%,
      rgba(139,30,61,.05) 0%,
      transparent 58%),
    radial-gradient(140% 100% at 50% 120%,
      rgba(31,26,22,.045) 0%,
      transparent 60%);
}

html[data-theme="obsidian"] body::before {
  background:
    radial-gradient(130% 90% at 14% -8%,
      rgba(201,151,58,.14) 0%,
      transparent 50%),
    radial-gradient(130% 90% at 88% 8%,
      rgba(139,30,61,.10) 0%,
      transparent 55%),
    radial-gradient(150% 100% at 50% 122%,
      rgba(0,0,0,.55) 0%,
      transparent 62%);
}

/* Layer 1 — Gamazine atmospheric substrate.
   A slow mineral mesh + a fine turbulence grain, held at very low opacity.
   It must be invisible until it is missed. */
html[data-theme="vellum"]  body::after,
html[data-theme="obsidian"] body::after {
  content: '';
  position: fixed;
  inset: -4%;
  z-index: var(--layer-gamazine);
  pointer-events: none;
  background-image: var(--gamazine-mesh), var(--material-grain);
  background-size: var(--gamazine-mesh-size), 340px 340px;
  background-position: 0% 50%, 0 0;
  background-blend-mode: soft-light, overlay;
  opacity: var(--mesh-op);
  animation: gamazine-drift var(--dur-sweep) ease-in-out infinite;
  will-change: background-position;
}

/* Secondary grain — subtler, tighter, non-animated. */
html[data-theme="vellum"]  body > .gamazine-grain,
html[data-theme="obsidian"] body > .gamazine-grain {
  position: fixed;
  inset: 0;
  z-index: var(--layer-gamazine);
  pointer-events: none;
  background-image: var(--tex-gam-substrate);
  background-size: 420px 420px;
  mix-blend-mode: overlay;
  opacity: var(--material-grain-op);
}

@keyframes gamazine-drift {
  0%   { background-position: 0% 50%,   0 0; }
  50%  { background-position: 100% 50%, 220px 180px; }
  100% { background-position: 0% 50%,   0 0; }
}

/* ─── 4 · VELLUM SURFACE MATERIAL ───────────────────────────────────────── */

.mat-vellum {
  background-color: var(--surface-lift);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    var(--tex-vel-grain);
  background-size: auto, 340px 340px;
  background-blend-mode: normal, soft-light;
  color: var(--text-primary);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-inset), var(--shadow-1);
  border-radius: var(--r-md);
}

.mat-vellum--raised {
  background-color: var(--surface-lift);
  box-shadow: var(--sh-inset), var(--shadow-2);
}

.mat-vellum--inset {
  background-color: var(--surface-deep);
  background-image: var(--tex-vel-grain);
  background-size: 340px 340px;
  background-blend-mode: soft-light;
  box-shadow:
    inset 0 1px 2px rgba(31,26,22,.10),
    inset 0 -1px 0 rgba(255,255,255,.35);
  border-color: var(--surface-edge);
}

/* ─── 5 · OBSIDIAN SURFACE MATERIAL ─────────────────────────────────────── */

.mat-obsidian {
  background-color: var(--surface-lift);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 55%),
    var(--tex-obs-grain);
  background-size: auto, 380px 380px;
  background-blend-mode: normal, soft-light;
  color: var(--text-primary);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-inset-d), var(--shadow-1);
  border-radius: var(--r-md);
}

.mat-obsidian--raised {
  box-shadow: var(--sh-inset-d), var(--shadow-2);
}

.mat-obsidian--inset {
  background-color: var(--surface-deep);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.05);
  border-color: var(--surface-edge);
}

/* ─── 6 · POLISHED GOLD MATERIAL ────────────────────────────────────────── */

/* Gold line — a hairline used to divide or sign. Sweeps softly. */
.mat-gold-line {
  height: 1px;
  border: 0;
  background: var(--gold-hair);
  background-size: 220% 100%;
  opacity: .75;
  animation: gold-shimmer 9s linear infinite;
}

/* Gold bar — a solid, machined block. Interactive accent. */
.mat-gold {
  background-color: var(--gold-2);
  background-image: var(--gold-spec);
  background-size: var(--gold-spec-size);
  background-position: 0% 50%;
  color: #241A0A;
  border: 1px solid var(--gold-4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(94,68,22,.42),
    var(--sh-gold);
  animation: gold-sweep 24s ease-in-out infinite;
}

.mat-gold--quiet {
  animation: none;
  background-position: 50% 50%;
}

/* Gold ink — text rendered in gold, machined gradient, clipped. */
.mat-gold-ink {
  background-image: var(--gold-spec);
  background-size: var(--gold-spec-size);
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-sweep 30s ease-in-out infinite;
}

/* Gold ring — a 1px inner ring that marks the canonical CHIKARA vector
   presentation. Used sparingly, on selected states. */
.mat-gold-ring {
  position: relative;
}
.mat-gold-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(201,151,58,.55),
    inset 0 1px 0 rgba(244,217,138,.55),
    0 0 22px -6px var(--accent-glow);
}

@keyframes gold-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gold-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* ─── 7 · GLASS / TRANSLUCENT HYBRIDS ──────────────────────────────────── */

/* Glass sits above the Gamazine substrate so the mineral layer shows through. */
.mat-glass {
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    var(--shadow-2);
}

html[data-theme="obsidian"] .mat-glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--shadow-2);
}

/* Vellum-glass: warm, opaque-ish, for the dock and top bars. */
.mat-glass--warm {
  background-color: rgba(255,251,239,.82);
  border-color: rgba(31,26,22,.075);
}

html[data-theme="obsidian"] .mat-glass--warm {
  background-color: rgba(20,16,20,.72);
  border-color: rgba(246,240,226,.08);
}

/* ─── 8 · VECTOR PRESENTATION ENVIRONMENT ──────────────────────────────── */

/* A canonical CHIKARA vector is placed inside a .mat-vector -- a shallow
   plinth that gives the icon physical placement without altering it. */
.mat-vector {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.mat-vector::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* Vellum plinth — soft warm glow beneath gold */
.mat-vector--vellum::before {
  background:
    radial-gradient(70% 70% at 30% 20%,
      rgba(255,255,255,.9) 0%,
      rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 50% 100%,
      rgba(31,26,22,.06) 0%,
      transparent 65%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(31,26,22,.05);
  border: 1px solid rgba(31,26,22,.06);
}

/* Obsidian plinth — deep with faint gold rim */
.mat-vector--obsidian::before {
  background:
    radial-gradient(70% 70% at 30% 20%,
      rgba(255,255,255,.06) 0%,
      transparent 60%),
    radial-gradient(120% 120% at 50% 100%,
      rgba(0,0,0,.6) 0%,
      transparent 65%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(246,240,226,.06);
}

/* Gamazine plinth — mineral substrate visible beneath the vector */
.mat-vector--gamazine::before {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
    var(--tex-vel-grain);
  background-size: auto, 340px 340px;
  background-blend-mode: normal, soft-light;
  background-color: var(--surface-lift);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(31,26,22,.06);
  border: 1px solid var(--hairline);
}

html[data-theme="obsidian"] .mat-vector--gamazine::before {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--tex-obs-grain);
  background-size: auto, 380px 380px;
  background-blend-mode: normal, soft-light;
  background-color: var(--surface-lift);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(246,240,226,.07);
}

.mat-vector > * { position: relative; z-index: 1; }

/* ─── 9 · DEPTH CUES ────────────────────────────────────────────────────── */

/* A subtle ambient occlusion shadow under elevated elements — as if the
   element is physically lifted above the Gamazine substrate. */
.depth-lift {
  position: relative;
}
.depth-lift::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -10px;
  height: 22px;
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%,
    rgba(31,26,22,.22) 0%, transparent 70%);
  filter: blur(6px);
  opacity: .8;
  z-index: -1;
}
html[data-theme="obsidian"] .depth-lift::after {
  background: radial-gradient(50% 100% at 50% 0%,
    rgba(0,0,0,.75) 0%, transparent 70%);
}

/* ─── 10 · REDUCED MOTION ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body::after,
  .mat-gold,
  .mat-gold-ink,
  .mat-gold-line {
    animation: none !important;
  }
}
html[data-reduced-motion="true"] body::after,
html[data-reduced-motion="true"] .mat-gold,
html[data-reduced-motion="true"] .mat-gold-ink,
html[data-reduced-motion="true"] .mat-gold-line {
  animation: none !important;
}