/* ============================================================
   REVELL · COLOR SYSTEM
   A celestial, dark-first palette. The night sky is home base;
   dawn (warm) and dusk (cool) are the two accent moods.
   Base values first, semantic aliases below.
   ============================================================ */
:root {
  color-scheme: dark;

  /* —— Brand marks (sampled from the ram logo) —— */
  --teal:        #4a9d9d; /* logo head + R — primary brand */
  --teal-bright: #8ccbd2; /* dashboard accent, data highlights */
  --sage:        #98cbaa; /* support surface accent, calm green */
  --slate:       #3d4e60; /* logo horn — structural blue-grey */
  --sand:        #b0a090; /* logo crescent moon — warm neutral */

  /* —— Celestial accents —— */
  --rose:   #d65682; /* soul / relationship memories */
  --gold:   #d6ad6e; /* episodic highlights, dawn warmth */
  --amber:  #c97b2d; /* dawn primary, marketing accent */
  --amber-deep: #9e5e1f;

  /* —— Night neutrals (dark theme spine) —— */
  --night-0: #080b11; /* deepest void */
  --night-1: #0b0f16; /* app background */
  --night-2: #0e131c; /* raised background */
  --panel:   #121826; /* card / panel surface */
  --panel-2: #161722; /* alt warm panel */
  --line:    #273044; /* hairline borders */
  --line-soft: #1c2434;

  --cream:  #f5f0ea; /* warm primary text (product) */
  --text:   #e8ecf2; /* cool primary text */
  --muted:  #aab4c5; /* secondary text */
  --faint:  #6b7688; /* tertiary / metadata */

  /* —— Semantic status —— */
  --ok:      #4ade80;
  --ok-dim:  #14251d;
  --warn:    #d6ad6e;
  --danger:  #e06a5c;
  --info:    var(--teal-bright);

  /* —— Semantic aliases (use these in components) —— */
  --bg:            var(--night-1);
  --bg-raised:     var(--night-2);
  --surface:       var(--panel);
  --surface-warm:  var(--panel-2);
  --border:        var(--line);
  --border-strong: #33405a;

  --text-strong:  var(--cream);
  --text-body:    var(--text);
  --text-muted:   var(--muted);
  --text-faint:   var(--faint);

  --accent:       var(--teal);
  --accent-hover: #5cb4b4;
  --accent-quiet: rgba(74, 157, 157, 0.12);
  --on-accent:    #06231f;

  --link:       var(--teal-bright);
  --link-hover: #b6e2e7;

  /* Ambient glow used behind heroes / marks */
  --glow-teal: radial-gradient(circle at 15% 15%, rgba(152,203,170,0.09), transparent 34rem); /* @kind other */
}

/* ————————————————————————————————————————————————
   DAWN — warm mood (amber sunrise over the night).
   Apply data-theme="dawn" on any subtree.
   ———————————————————————————————————————————————— */
[data-theme="dawn"] {
  --accent:       var(--amber);
  --accent-hover: #d98c42;
  --accent-quiet: rgba(201,123,45,0.14);
  --on-accent:    #241505;
  --link:         var(--gold);
  --link-hover:   #e6c48d;
  --bg:           #100b09;
  --bg-raised:    #17100c;
  --surface:      #1c1410;
  --border:       #3a2c20;
  --glow-teal:    radial-gradient(circle at 85% 12%, rgba(201,123,45,0.12), transparent 34rem); /* @kind other */
}

/* ————————————————————————————————————————————————
   PAPER — light theme (marketing / "Which Claude" quiz / docs).
   Fraunces + Karla on warm off-white.
   ———————————————————————————————————————————————— */
[data-theme="paper"] {
  color-scheme: light;
  --paper:   #efecf4;
  --bg:      #efecf4;
  --bg-raised: #f6f3fa;
  --surface: #fbfafd;
  --surface-warm: #fdf8f1;
  --border:  #ccc4d8;
  --border-strong: #b3a8c6;

  --text-strong: #2b2433;
  --text-body:   #2b2433;
  --text-muted:  #5c5468;
  --text-faint:  #857c94;

  --accent:       var(--amber);
  --accent-hover: var(--amber-deep);
  --accent-quiet: #f2ecd9;
  --on-accent:    #fffdf9;
  --link:         var(--amber-deep);
  --link-hover:   #7e4a17;

  --ok: #3f7257;  --ok-dim: #e4efe8;
  --danger: #a24a3f;
  --glow-teal: none; /* @kind other */
}