/* ==========================================================================
   PSYOURA: 1. TOKENS
   --------------------------------------------------------------------------
   The whole colour identity lives here. Change a hex in:root and it changes
   everywhere on the site. Nothing below this file uses a raw colour value.

   TWO LAYERS:
     BRAND INKS: the fourteen PSYOURA colours
     WORLDS: how those colours are arranged, per section

   A section picks its world with one attribute:  <section data-world="nature">
   ========================================================================== */:root {
  /* ---------------- brand inks ---------------- */
  --forest:  #123C32;   /* 1 · main identity        */
  --jungle:  #1F5A45;   /* 2 · major sections       */
  --moss:    #557A50;   /* 3 · secondary areas      */
  --fern:    #79A66A;   /* 4 · interaction          */
  --leaf:    #B8D98B;   /* 5 · positive moments     */
  --lime:    #D8EE9B;   /* 6 · tiny surprise        */

  --gold:    #F2C75C;   /* discovery                */
  --clay:    #A96F55;   /* body, grounding          */
  --mist:    #B9D8D0;   /* thought                  */
  --ocean:   #174B52;   /* depth, reflection        */
  --cosmic:  #102A2A;   /* the universe             */
  --cream:   #F3F0D9;   /* type on dark grounds     */
  --paper:   #F5F1E5;   /* the light ground         */
  --ink:     #17231F;   /* type on light grounds    */

  /* ---------------- readable counterparts ----------------
     The light greens cannot carry small text. These are the same hues with
     enough depth to pass WCAG AA on Natural Paper. Rule of thumb:
     brand colour for things you look at, -ink colour for things you read. */
  --moss-ink:  #456440;   /* 5.3:1 on paper */
  --fern-ink:  #3F6B39;   /* 6.6:1 */
  --clay-ink:  #7E4E38;   /* 6.1:1 */
  --amber-ink: #7D5A14;   /* 5.6:1 */

  /* ---------------- tinted grounds ----------------
     Each is a light ground carrying a trace of its world's colour. */
  --g-thoughts: #E6EFEB;
  --g-emotions: #EDEDDD;
  --g-body:     #E8E7D4;
  --g-nature:   #DFE9CE;

  /* ---------------- semantic (overridden per world) ---------------- */
  --ground:     var(--paper);
  --type:       var(--ink);
  --soft:       #4B564E;
  --faint:      #5C655F;
  --accent:     var(--jungle);   /* readable: links, labels        */
  --accent-dec: var(--fern);     /* decorative: marks, fills       */
  --rule:       #DCD8C4;
  --surface:    #FBF9F0;
  --on-accent:  #F3F0D9;
  --aura:       rgba(121, 166, 106, .30);

  /* ---------------- type ---------------- */
  --display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Hanken Grotesk", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;

  --s--2: .72rem;
  --s--1: .82rem;
  --s0:   1.0625rem;
  --s1:   1.2rem;
  --s2:   1.5rem;
  --s3:   1.95rem;
  --s4:   clamp(2rem, 1.4rem + 2vw, 2.7rem);
  --s5:   clamp(2.3rem, 1.2rem + 4vw, 3.9rem);
  --s6:   clamp(2.6rem, 1rem + 6.6vw, 5.6rem);

  /* ---------------- space ---------------- */
  --sp1: .4rem;  --sp2: .8rem;  --sp3: 1.2rem; --sp4: 1.8rem;
  --sp5: 2.6rem; --sp6: 4rem;   --sp7: 5.5rem; --sp8: 7.5rem;

  --wrap: 1180px;
  --measure: 64ch;
  --header-h: 68px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --world-fade: 800ms;
}

/* ==========================================================================
   THE TEN WORLDS
   Ground, type, accent and aura move together. This is the entire colour
   mechanism: there is nothing else to learn.
   ========================================================================== */

[data-world="home"] {
  --ground: var(--forest); --type: var(--cream); --soft: #C3CFB9; --faint: #9AAB95;
  --accent: var(--gold); --accent-dec: var(--leaf); --rule: #2B5548;
  --surface: #16463A; --on-accent: #123C32; --aura: rgba(242,199,92,.16);
}
[data-world="paper"] {
  --ground: var(--paper); --type: var(--ink); --soft: #4B564E; --faint: #5C655F;
  --accent: var(--jungle); --accent-dec: var(--fern); --rule: #DCD8C4;
  --surface: #FBF9F0; --on-accent: var(--cream); --aura: rgba(121,166,106,.26);
}
[data-world="thoughts"] {
  --ground: var(--g-thoughts); --type: var(--ocean); --soft: #3E5A5C; --faint: #57696C;
  --accent: var(--ocean); --accent-dec: var(--fern); --rule: #C8DBD5;
  --surface: #F1F7F4; --on-accent: var(--cream); --aura: rgba(185,216,208,.5);
}
[data-world="emotions"] {
  --ground: var(--g-emotions); --type: var(--ink); --soft: #4E5347; --faint: #636659;
  --accent: var(--clay-ink); --accent-dec: var(--leaf); --rule: #D9D6BE;
  --surface: #F6F4E6; --on-accent: var(--cream); --aura: rgba(169,111,85,.22);
}
[data-world="body"] {
  --ground: var(--g-body); --type: var(--ink); --soft: #4E5347; --faint: #595D50;
  --accent: var(--moss-ink); --accent-dec: var(--clay); --rule: #D4D2B8;
  --surface: #F3F2E2; --on-accent: var(--cream); --aura: rgba(85,122,80,.22);
}
[data-world="self"] {
  --ground: var(--forest); --type: var(--cream); --soft: #C3CFB9; --faint: #9BAA95;
  --accent: var(--leaf); --accent-dec: var(--gold); --rule: #2B5548;
  --surface: #16463A; --on-accent: #123C32; --aura: rgba(184,217,139,.14);
}
[data-world="nature"] {
  --ground: var(--g-nature); --type: #1C3A22; --soft: #42553F; --faint: #586553;
  --accent: var(--fern-ink); --accent-dec: var(--fern); --rule: #C8D8B4;
  --surface: #EAF2DC; --on-accent: var(--cream); --aura: rgba(121,166,106,.34);
}
[data-world="community"] {
  --ground: var(--jungle); --type: var(--cream); --soft: #C8D4C2; --faint: #C5CFC6;
  --accent: var(--gold); --accent-dec: var(--leaf); --rule: #356B57;
  --surface: #24654E; --on-accent: #123C32; --aura: rgba(242,199,92,.18);
}
[data-world="reflection"] {
  --ground: var(--cosmic); --type: var(--cream); --soft: #B6C4BA; --faint: #8A9A91;
  --accent: var(--leaf); --accent-dec: var(--mist); --rule: #234240;
  --surface: #163331; --on-accent: #102A2A; --aura: rgba(184,217,139,.13);
}
[data-world="universe"] {
  --ground: var(--cosmic); --type: var(--cream); --soft: #B6C4BA; --faint: #8A9A91;
  --accent: var(--gold); --accent-dec: var(--leaf); --rule: #234240;
  --surface: #163331; --on-accent: #102A2A; --aura: rgba(242,199,92,.14);
}

/* Auras by mood: used by the feeling check and the reflection experience.
   Purely atmospheric. They describe nothing about the person choosing them. */
[data-aura="calm"]      { --aura: rgba(121,166,106,.34); }
[data-aura="curious"]   { --aura: rgba(242,199,92,.30); }
[data-aura="thinking"]  { --aura: rgba(185,216,208,.50); }
[data-aura="distant"]   { --aura: rgba(23,75,82,.34); }
[data-aura="growing"]   { --aura: rgba(184,217,139,.36); }
[data-aura="night"]     { --aura: rgba(16,42,42,.44); }

/* --------------------------------------------------------------------------
   FEELING COLOURS
   --------------------------------------------------------------------------
   One colour per feeling on the feeling check, so nine choices do not look
   like one choice made nine times. They are atmosphere only: none of them
   means better or worse than another, and the order carries no scale.

   The attribute sits on two things at once. Every button carries its own, so
   the row reads as a palette. The section takes the chosen one, so the glow
   behind the whole thing changes with the answer.
   -------------------------------------------------------------------------- */
[data-feel="overthinking"]  { --feel: #6366A8; --aura: rgba(99,102,168,.26); }
[data-feel="drained"]       { --feel: #7A6478; --aura: rgba(122,100,120,.26); }
[data-feel="growing"]       { --feel: #5F9450; --aura: rgba(95,148,80,.28); }
[data-feel="lost"]          { --feel: #7C8079; --aura: rgba(124,128,121,.30); }
[data-feel="stuck"]         { --feel: #B06B4E; --aura: rgba(176,107,78,.24); }
[data-feel="disconnected"]  { --feel: #5F8896; --aura: rgba(95,136,150,.26); }
[data-feel="curious"]       { --feel: #BE8A2E; --aura: rgba(190,138,46,.26); }
[data-feel="calm"]          { --feel: #3E8B79; --aura: rgba(62,139,121,.26); }
[data-feel="unsure"]        { --feel: #9089B4; --aura: rgba(144,137,180,.26); }

/* Page-level echo of the same palette, for the header. */
[data-site-world="home"] { --site-ground: var(--forest); --site-accent: var(--gold); }
[data-site-world="paper"] { --site-ground: var(--paper); --site-accent: var(--jungle); }
[data-site-world="thoughts"] { --site-ground: var(--g-thoughts); --site-accent: var(--ocean); }
[data-site-world="emotions"] { --site-ground: var(--g-emotions); --site-accent: var(--clay-ink); }
[data-site-world="body"] { --site-ground: var(--g-body); --site-accent: var(--moss-ink); }
[data-site-world="self"] { --site-ground: var(--forest); --site-accent: var(--leaf); }
[data-site-world="nature"] { --site-ground: var(--g-nature); --site-accent: var(--fern-ink); }
[data-site-world="community"] { --site-ground: var(--jungle); --site-accent: var(--gold); }
[data-site-world="reflection"] { --site-ground: var(--cosmic); --site-accent: var(--leaf); }
[data-site-world="universe"] { --site-ground: var(--cosmic); --site-accent: var(--gold); }

[data-site-world="home"] { --site-type: var(--cream); }
[data-site-world="paper"] { --site-type: var(--ink); }
[data-site-world="thoughts"] { --site-type: var(--ocean); }
[data-site-world="emotions"] { --site-type: var(--ink); }
[data-site-world="body"] { --site-type: var(--ink); }
[data-site-world="self"] { --site-type: var(--cream); }
[data-site-world="nature"] { --site-type: #1C3A22; }
[data-site-world="community"] { --site-type: var(--cream); }
[data-site-world="reflection"] { --site-type: var(--cream); }
[data-site-world="universe"] { --site-type: var(--cream); }