/* Lumbia tokens, taken from the Haumind reference: the whole page is the dusk sky (teal above,
   golden glow low, sand at the horizon) and the content floats on it in milky glass. Jade is the
   "chosen" colour, the sky-blue gradient is the action colour, gold and terracotta bring the warmth. */
:root {
  --canvas-base: #A3B8B3;
  --canvas:
    radial-gradient(120% 60% at 0% 100%, rgba(236, 196, 138, .85) 0%, rgba(226, 180, 128, .4) 40%, transparent 70%),
    radial-gradient(90% 50% at 100% 85%, rgba(214, 160, 122, .55) 0%, transparent 65%),
    linear-gradient(180deg, #6E909A 0%, #86A4A8 28%, #A3B8B3 52%, #C3C2A8 74%, #D9BC93 100%);
  --mist: #F1F2EE;
  --bg: #EDEFEB;
  --paper: rgba(250, 249, 245, .74);
  --glass-card-line: rgba(255, 255, 255, .6);
  --surface: #E2E7E3;
  --surface-2: #D2DAD6;
  --ink: #121A1D;
  --ink-2: #3A4549;
  --muted: #55625F;
  --line: #DCE2DD;
  --line-strong: #BCC6C1;

  --slab: #172126;
  --on-slab: #F4F2ED;
  --on-slab-muted: #A8B4B5;
  --tab-active: #F4F2ED;

  /* --sun is the action colour (sky blue, from the hero sky); --gold is the sand glow. */
  --sun: #4A7A87;
  --sun-deep: #3A6370;
  --sun-soft: #D7E5E8;
  --gold: #E6BF8E;
  --jade: #32988A;
  --jade-deep: #1F6F64;
  --grad-jade: linear-gradient(135deg, #24806F 0%, #32988A 55%, #57B3A3 100%);
  --ok: #5FCBB5;
  --danger: #B4543A;
  --grad-sun: linear-gradient(135deg, #3E6773 0%, #548490 50%, #7AA2AA 100%);
  /* Golden-hour glass for the warm cards (reflection, recognise, empty path). */
  --grad-dawn: linear-gradient(165deg, rgba(252, 243, 226, .9) 0%, rgba(243, 221, 186, .88) 55%, rgba(232, 193, 152, .88) 100%);
  /* Dusk for the dark feature cards (my direction, days you showed up). */
  --dusk:
    radial-gradient(70% 60% at 100% 100%, rgba(232, 184, 128, .55) 0%, transparent 70%),
    linear-gradient(160deg, #24444C 0%, #36606A 50%, #5E6A63 100%);
  --glow: radial-gradient(circle at 50% 50%, rgba(240, 196, 146, .5) 0%, rgba(214, 160, 118, .2) 40%, transparent 70%);
  /* Golden-hour sky: teal above, sand at the horizon, dark below. Used by the Today hero and the affirmation card. */
  --room:
    radial-gradient(75% 30% at 55% 72%, rgba(244, 202, 154, .9) 0%, rgba(222, 168, 124, .35) 45%, transparent 75%),
    radial-gradient(40% 50% at 0% 68%, rgba(255, 214, 160, .55) 0%, transparent 70%),
    linear-gradient(180deg, #5C8C98 0%, #77A0A6 30%, #9DB2AE 50%, #CDB597 66%, #7A6253 80%, #1E1D1D 92%, #121414 100%);
  --ridge: linear-gradient(180deg, rgba(214, 170, 140, .55), rgba(190, 150, 126, .2));
  --glass: rgba(244, 248, 247, .14);
  --glass-line: rgba(244, 248, 247, .28);

  --think: #2F6E7E;
  --feel: #C0604A;
  --live: #C48A2A;

  --font-sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-voice: 'Playfair Display', Georgia, serif;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15.5px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-hero: clamp(46px, 13vw, 64px);

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-btn: 10px;
  --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(18, 26, 29, .06);
  --shadow: 0 1px 0 rgba(18, 26, 29, .04), 0 16px 36px -18px rgba(18, 26, 29, .32);
  --shadow-lift: 0 30px 60px -28px rgba(18, 26, 29, .6);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur: .34s;
  --gutter: 20px;
  --tabbar-h: 68px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* Day colours, always. "only" also stops browsers from auto-darkening the page. */
  color-scheme: only light;
}