/* ==========================================================================
   Kokoro Collective — design tokens
   The single source of truth for colour, type, space and shape.
   Change a value here and it changes everywhere it is used.
   ========================================================================== */

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --surface:            #12161F;  /* the page itself                        */
  --surface-raised:     #0E1219;  /* panels sitting on the page             */
  --surface-sunken:     #171C27;  /* inputs, inset cards                    */
  --surface-slate:      #1A1E2A;
  --surface-forest:     #111915;
  --surface-device:     #07090D;  /* phone bezel                            */
  --surface-screen-a:   #1B1E2D;  /* behind a screenshot while it loads     */
  --surface-screen-b:   #0B0F16;

  /* ---- Ink ------------------------------------------------------------ */
  --ink:                #EDEAE3;  /* primary text                           */
  --ink-list:           #D5D8DE;  /* dense list copy                        */
  --ink-muted:          #B7BCC7;  /* body copy                              */
  --ink-dim:            #8C93A1;  /* meta, footer                           */

  /* ---- Rules ---------------------------------------------------------- */
  --rule:               #232938;  /* default hairline                       */
  --rule-soft:          #2A3040;
  --rule-strong:        #3A4152;
  --rule-violet:        #2E3445;

  /* ---- Accents -------------------------------------------------------- */
  /* Teal — the house accent, and KNOX */
  --teal:               #2ABFBF;
  --teal-lift:          #4FD3D3;  /* hover                                  */
  --teal-on:            #0B1016;  /* text on a teal fill                    */
  --teal-rule:          #1F4A4E;
  --teal-chip-bg:       #173537;
  --teal-chip-ink:      #BDEDED;

  /* Clay — BECOME */
  --clay:               #E0503C;
  --clay-lift:          #EA6D5B;
  --clay-on:            #140C0A;
  --clay-rule:          #4A2A26;
  --clay-chip-bg:       #3A2220;
  --clay-chip-ink:      #F4C8BF;
  --clay-ink:           #F08A7A;

  /* Sage — Wellbeing Passport */
  --sage:               #8FC9A3;
  --sage-lift:          #A9D9B9;
  --sage-on:            #0B140F;
  --sage-rule:          #2E4A3A;
  --sage-chip-bg:       #1E3328;
  --sage-chip-ink:      #CDEBD6;

  /* Seal — the 心集 hanko motif */
  --seal:               #E42C30;
  --seal-glow:          rgba(228, 44, 48, 0.45);
  --seal-text-glow:     rgba(228, 44, 48, 0.60);

  /* ---- Type ----------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-jp:      'Noto Sans JP', system-ui, sans-serif;

  /* Display scale */
  --t-d1: 88px;  --t-d2: 72px;  --t-d3: 64px;
  --t-d4: 56px;  --t-d5: 44px;  --t-d6: 36px;  --t-d7: 30px;

  /* Body scale */
  --t-lead: 20px; --t-body-lg: 18px; --t-body: 17px;
  --t-base: 16px; --t-sm: 15px;  --t-xs: 14px;
  --t-2xs: 13px;  --t-3xs: 12px;

  /* ---- Space ---------------------------------------------------------- */
  --pad-x:      80px;   /* horizontal page gutter                           */
  --section-y:  120px;  /* default vertical section rhythm                  */
  --grid-gap:   24px;   /* 12-column gutter                                 */

  /* ---- Shape ---------------------------------------------------------- */
  --r-sm:   4px;   --r-md:  12px;  --r-lg:  22px;
  --r-xl:   28px;  --r-screen: 36px; --r-device: 44px;
  --r-pill: 999px;
  --screen-inset: 16px;  /* status-bar strip above a phone screenshot */

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-device: 0 30px 60px rgba(0, 0, 0, 0.5);

  /* ---- Motion --------------------------------------------------------- */
  --ease: 0.15s ease;
}