/* Nebula — Plate tokens. Source: docs/brand/style-guide.md §4–7 (v2).
   Dark-first: the bare :root is the plate; light is the paper print of the same plate.
   The two dark blocks and the two light blocks are identical by contract; build/build.mjs fails on drift. */
:root {
  /* @dark-block */
  color-scheme: dark;
  --bg:            #0B0C10;
  --grid:          #15161C;
  --rule:          #3A3B45;
  --surface:       rgba(11,12,16,.80);
  --surface-2:     rgba(11,12,16,.94);
  --text:          #E9E6DC;
  --text-2:        #A7A5AE;
  --caption:       #7E7C86;
  --ion:           #C9B8FF;
  --ion-core:      #7C6CFF;
  --on-ion:        #0B0C10;
  --ember:         #FF8A5C;
  --ember-ink:     #FF8A5C;
  --on-ember:      #111216;
  --pass:          #4ADE9A;
  --fail:          #FF5C7A;
  --pending:       #E7C86A;
  --neb-0:         rgba(201,184,255,.85);
  --neb-1:         rgba(124,108,255,.35);
  --neb-2:         rgba(60,50,140,.18);
  --neb-3:         rgba(11,12,16,0);
  --focus:         0 0 0 1px var(--bg), 0 0 0 3px var(--ion);
  /* Plate-local ink: the plate ground is dark in both themes (toast for the human gate, evidence lines) */
  --plate:         #0B0C10;
  --plate-text:    #E9E6DC;
  --plate-text-2:  #A7A5AE;
  /* @end-dark-block */

  --font-display: "Gloock", "Didot", "Bodoni MT", Georgia, serif;
  --font-mono:    "Azeret Mono", "SF Mono", Menlo, monospace;
  --font-monolith: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; /* the monolith wordmark ONLY — a logotype, not a text style */
  --monolith-size: 430px;

  --t-cap: 0.65625rem; --t-sm: 0.8125rem; --t-base: 0.875rem; --t-md: 1rem;
  --t-h3: 1.75rem; --t-h2: 2.75rem; --t-h1: 4rem; --t-hero: 6rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 40px; --s-8: 64px; --s-9: 120px; --s-10: 160px;
  --r-0: 0; --r-pill: 999px;
  --grid-cell: 120px; --mark: 14px; --inset: 40px; --margin: 64px;

  --d-state: 160ms; --d-enter: 320ms; --d-lock: 900ms;
  --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit:   cubic-bezier(0.4, 0, 1, 1);
  --ease-lock:   cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* @light-block */
    color-scheme: light;
    --bg:          #F3F0E6;
    --grid:        #E6E2D6;
    --rule:        #B9B5A8;
    --surface:     rgba(243,240,230,.88);
    --surface-2:   rgba(243,240,230,.96);
    --text:        #111216;
    --text-2:      #4F4E57;
    --caption:     #66656E;
    --ion:         #5B4BE0;
    --ion-core:    #7C6CFF;
    --on-ion:      #F3F0E6;
    --ember:       #FF8A5C;
    --ember-ink:   #AD421A;
    --on-ember:    #111216;
    --pass:        #15734B;
    --fail:        #BE2C49;
    --pending:     #7A5E0B;
    --neb-0:       rgba(124,108,255,.55);
    --neb-1:       rgba(124,108,255,.22);
    --neb-2:       rgba(91,75,224,.10);
    --neb-3:       rgba(243,240,230,0);
    --focus:       0 0 0 1px var(--bg), 0 0 0 3px var(--ion);
    --plate:       #0B0C10;
    --plate-text:  #E9E6DC;
    --plate-text-2: #A7A5AE;
    /* @end-light-block */
  }
}
:root[data-theme="light"] {
    /* @light-block */
    color-scheme: light;
    --bg:          #F3F0E6;
    --grid:        #E6E2D6;
    --rule:        #B9B5A8;
    --surface:     rgba(243,240,230,.88);
    --surface-2:   rgba(243,240,230,.96);
    --text:        #111216;
    --text-2:      #4F4E57;
    --caption:     #66656E;
    --ion:         #5B4BE0;
    --ion-core:    #7C6CFF;
    --on-ion:      #F3F0E6;
    --ember:       #FF8A5C;
    --ember-ink:   #AD421A;
    --on-ember:    #111216;
    --pass:        #15734B;
    --fail:        #BE2C49;
    --pending:     #7A5E0B;
    --neb-0:       rgba(124,108,255,.55);
    --neb-1:       rgba(124,108,255,.22);
    --neb-2:       rgba(91,75,224,.10);
    --neb-3:       rgba(243,240,230,0);
    --focus:       0 0 0 1px var(--bg), 0 0 0 3px var(--ion);
    --plate:       #0B0C10;
    --plate-text:  #E9E6DC;
    --plate-text-2: #A7A5AE;
    /* @end-light-block */
}
:root[data-theme="dark"] {
  /* @dark-block */
  color-scheme: dark;
  --bg:            #0B0C10;
  --grid:          #15161C;
  --rule:          #3A3B45;
  --surface:       rgba(11,12,16,.80);
  --surface-2:     rgba(11,12,16,.94);
  --text:          #E9E6DC;
  --text-2:        #A7A5AE;
  --caption:       #7E7C86;
  --ion:           #C9B8FF;
  --ion-core:      #7C6CFF;
  --on-ion:        #0B0C10;
  --ember:         #FF8A5C;
  --ember-ink:     #FF8A5C;
  --on-ember:      #111216;
  --pass:          #4ADE9A;
  --fail:          #FF5C7A;
  --pending:       #E7C86A;
  --neb-0:         rgba(201,184,255,.85);
  --neb-1:         rgba(124,108,255,.35);
  --neb-2:         rgba(60,50,140,.18);
  --neb-3:         rgba(11,12,16,0);
  --focus:         0 0 0 1px var(--bg), 0 0 0 3px var(--ion);
  /* Plate-local ink: the plate ground is dark in both themes (toast for the human gate, evidence lines) */
  --plate:         #0B0C10;
  --plate-text:    #E9E6DC;
  --plate-text-2:  #A7A5AE;
  /* @end-dark-block */
}
@media (max-width: 768px) { :root { --monolith-size: 29vw; --grid-cell: 80px; --mark: 10px; --inset: 16px; --margin: 28px; --t-hero: 2.75rem; --t-h2: 2rem; } }