/* © 2026 SiteRevive. Unpaid preview. Unauthorized use, reproduction, or distribution prohibited. */
/* Psychic Readings by Kimberly: tokens.
   Two seeds measured by pixel from her logo, every other colour computed from them.
   The hex on each line is the computed value (BRIEF.md section 3), so browsers without
   relative colour syntax render the same palette. The @supports block below restates
   each token as its formula. */

@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-italic-var.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --seed-violet: #32045f;   /* the "PSYCHIC" wordmark, oklch(0.270 0.139 298.5) */
  --seed-gold:   #e7bd63;   /* the logo's gold ring,   oklch(0.818 0.119 84.6)  */

  --night:         #2b0056;
  --night-2:       #411b71;
  --paper:         #f7f5fd;
  --paper-2:       #eeeaf9;
  --card:          #fefdff;
  --ink:           #32045f;
  --body:          #3f3357;
  --muted:         #5e5573;
  --violet:        #5d17a6;
  --lilac:         #c1a6f9;
  --haze:          #dccffc;
  --gold:          #e7bd63;
  --gold-ink:      #7a5a00;
  --gold-deep:     #9a7300;
  --gold-pale:     #fdf2dd;
  --on-night:      #f0ecfb;
  --on-night-mute: #cec5e3;

  --f-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-voice:   "Cormorant", "Cormorant Garamond", Georgia, serif;
  --f-body:    "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale, trimmed 10 percent from the first pass. Body copy is not trimmed. */
  --t-hero:  clamp(2.05rem, 1.2rem + 3.3vw, 3.85rem);
  --t-h2:    clamp(1.55rem, 1.1rem + 1.7vw, 2.45rem);
  --t-h3:    clamp(1.12rem, 1rem + .45vw, 1.35rem);
  --t-voice: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  --t-body:  1.0625rem;
  --t-small: .9375rem;

  --pad-section: clamp(3.6rem, 2.4rem + 4.6vw, 6.5rem);
  --wrap: 1160px;
  --r-card: 14px;
  --r-pill: 100px;

  --ease: cubic-bezier(.22, .8, .24, 1);

  /* The depth stack for display type: violet extrusion from the seed. */
  --extrude: 1px 1px 0 var(--haze), 2px 2px 0 var(--lilac), 3px 4px 10px rgb(50 4 95 / .28);
}

@supports (color: oklch(from red l c h)) {
  :root {
    --night:         oklch(from var(--seed-violet) calc(l - 0.03) c h);
    --night-2:       oklch(from var(--seed-violet) calc(l + 0.06) c h);
    --paper:         oklch(from var(--seed-violet) 0.975 calc(c * 0.07) h);
    --paper-2:       oklch(from var(--seed-violet) 0.945 calc(c * 0.15) h);
    --card:          oklch(from var(--seed-violet) 0.995 calc(c * 0.02) h);
    --ink:           var(--seed-violet);
    --body:          oklch(from var(--seed-violet) calc(l + 0.08) calc(c * 0.45) h);
    --muted:         oklch(from var(--seed-violet) calc(l + 0.2) calc(c * 0.35) h);
    --violet:        oklch(from var(--seed-violet) calc(l + 0.14) calc(c * 1.45) h);
    --lilac:         oklch(from var(--seed-violet) 0.78 calc(c * 0.85) h);
    --haze:          oklch(from var(--seed-violet) 0.88 calc(c * 0.45) h);
    --gold:          var(--seed-gold);
    --gold-ink:      oklch(from var(--seed-gold) calc(l - 0.33) calc(c * 0.85) h);
    --gold-deep:     oklch(from var(--seed-gold) calc(l - 0.24) c h);
    --gold-pale:     oklch(from var(--seed-gold) 0.965 calc(c * 0.25) h);
    --on-night:      oklch(from var(--seed-violet) 0.95 calc(c * 0.15) h);
    --on-night-mute: oklch(from var(--seed-violet) 0.84 calc(c * 0.3) h);
  }
}