/* Davis's shared brand kit (2026-10-03). See BRAND.md for the rules.
   Signature look: suraj.dsgn "Luxury Color Palettes" cover - near-black ground, a burnt-orange glow
   bleeding in from the top edge, warm ivory light sweeping up from the bottom-right corner, film grain.
   Supporting colours: slide 6 of the same post (Navy / Blue / Orange / White).
   Colours below were sampled from the cover itself. Use the tokens; never hard-code hex elsewhere. */

:root {
  /* signature */
  --black: #070707;        /* ground (sampled centre of the cover) */
  --ember: #CE5819;        /* glow core at the top edge */
  --ember-mid: #833912;
  --ember-low: #361A0A;
  --ivory: #FCFAF6;        /* bottom-right bloom */
  --ivory-shade: #CAC4B7;  /* bloom's soft edge */
  --mist: #9A9A9A;         /* secondary type on black, 7.0:1 */

  /* supporting (slide 6) */
  --navy: #092634;
  --blue: #004E72;
  --orange: #FF6E42;       /* buttons and large text on dark only (5.7:1 on navy, 7.6:1 on black) */
  --white: #F9F9F9;

  /* roles: page chrome follows the system light/dark setting */
  --bg: var(--black);
  --surface: #111111;
  --text: var(--white);
  --text-dim: var(--mist);
  --line: rgba(249, 249, 249, 0.10);
  --accent: var(--orange);
  --on-accent: var(--black);
  --grain-opacity: 0.05;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--ivory);
    --surface: #FFFFFF;
    --text: var(--black);
    --text-dim: #55524C;           /* 7.3:1 on ivory */
    --line: rgba(7, 7, 7, 0.10);
    --accent: var(--orange);       /* fill only: orange text on ivory fails contrast */
    --on-accent: var(--black);
  }
}
:root[data-theme="dark"] { --bg: var(--black); --text: var(--white); --text-dim: var(--mist); }

body { background: var(--bg); color: var(--text); }

/* THE LOOK. A .glow panel is artwork: it stays dark in both light and dark mode, like a photo.
   Text sits in the dark middle band only, never on the ivory bloom. */
.glow {
  position: relative;
  isolation: isolate;
  color: var(--white);
  background:
    /* ember across the whole top edge, hottest a little right of centre */
    radial-gradient(130% 38% at 55% -4%, rgba(214, 92, 27, 1) 0%, rgba(131, 57, 18, 0.78) 34%, rgba(54, 26, 10, 0.42) 64%, transparent 100%),
    /* ivory: one smooth diagonal sweep up from the bottom-right corner */
    radial-gradient(140% 74% at 104% 110%, #FFFEFD 0%, var(--ivory) 33%, var(--ivory-shade) 54%, rgba(96, 92, 86, 0.40) 74%, transparent 92%),
    var(--black);
}
/* variants: same structure, different light */
.glow--cool {   /* navy and blue instead of ember, for variety in a series */
  background:
    radial-gradient(70% 26% at 56% 0%, rgba(0, 78, 114, 0.95) 0%, rgba(9, 38, 52, 0.7) 45%, transparent 100%),
    radial-gradient(95% 52% at 100% 100%, #FFFEFD 0%, var(--ivory) 30%, #E9B9A4 52%, rgba(255, 110, 66, 0.25) 70%, transparent 86%),
    var(--black);
}
.glow--top { /* ember only, for headers and dense UI where the bloom would sit under content */
  background:
    radial-gradient(80% 40% at 56% 0%, rgba(206, 88, 25, 0.9) 0%, rgba(131, 57, 18, 0.55) 40%, transparent 100%),
    var(--black);
}
/* film grain: without it the gradients band and look cheap */
.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: normal;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.glow > * { position: relative; }

.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-plain { background: var(--text); color: var(--bg); }