/* Numen v3 tokens (WP-SHELL). FINAL-DESIGN 2.1 to 2.4 and 4.1. Dark only.
   Breakpoints: phone under 760 px, tablet 760 to 899, desktop 900 and up. */
:root {
  color-scheme: dark;

  /* ground and surfaces */
  --night: #070b18;
  --night-2: #0b1122;
  --night-3: #121a30;
  --night-4: #18213a;
  --line: rgba(239, 230, 210, .12);
  --line-2: rgba(239, 230, 210, .24);
  --line-3: rgba(239, 230, 210, .42);

  /* text: --ink-3 is the lowest text colour allowed */
  --ink: #efe6d2;
  --ink-2: #c6bfad;
  --ink-3: #9b9484;

  /* meaning */
  --glow: oklch(80% 0.13 80);
  --glow-ink: #f2c879;
  --glow-hover: #f6d48f;
  --on-glow: #1a1206;
  --mist: #a9bccf;
  --ember: #e98a6f;
  --glow-wash: rgba(242, 200, 121, .08);
  --mist-wash: rgba(169, 188, 207, .08);
  --ember-wash: rgba(233, 138, 111, .10);
  --glow-50: rgba(242, 200, 121, .5);
  --glow-45: rgba(242, 200, 121, .45);
  --glow-35: rgba(242, 200, 121, .35);
  --mist-45: rgba(169, 188, 207, .45);
  --ember-45: rgba(233, 138, 111, .45);
  --backdrop: rgba(7, 11, 24, .86);

  /* painting palette (art only, never text) FINAL-DESIGN 2.2 */
  --sky-0: #070b18;
  --sky-1: #0c1429;
  --sky-2: #1e2236;
  --sky-3: #3a2f2a;
  --ridge-1: #3a4a66;
  --ridge-2: #2f3d58;
  --ridge-3: #26324b;
  --ridge-4: #1d2740;
  --ridge-5: #161e33;
  --ridge-6: #111829;
  --ridge-7: #0d1220;
  --rock-warm: #3a2a20;
  --alpen-1: #ffd98f;
  --alpen-2: #f2c879;
  --alpen-3: #d9934f;
  --alpen-4: #8a4b2e;
  --mist-1: #c9d6e4;
  --mist-2: #9fb3c8;
  --star: #efe6d2;

  /* type */
  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --font-text: 'Source Sans 3', 'Source Sans Fallback', Arial, system-ui, sans-serif;
  --display: var(--font-display);
  --text: var(--font-text);
  --fs-label: 12px;
  --fs-fine: 13.5px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-card-head: 14px;
  --fs-card-title: 22px;
  --fs-h1: 28px;
  --fs-answer: 26px;
  --fs-overline: 15px;
  --fs-wordmark: 17px;
  --fs-chip: 17px;
  --nb-s: 18px;
  --nb-m: 24px;
  --nb-l: 36px;
  --nb-xl: 68px;
  --nb-xxl: 104px;

  /* spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* shape */
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 18px;
  --r-pill: 999px;

  /* layout */
  --max: 1240px;
  --gutter: 16px;
  --gap: 16px;
  --cols: 4;
  --card-pad: 20px;
  --section-gap: 24px;
  --top-h: 58px;
  --tab-h: 56px;
  --hit: 44px;
  --btn-h: 48px;
  --rail-h: 44px;

  /* view heights per setup (FINAL-DESIGN 2.6), the label rail is extra */
  --view-week: 220px;
  --view-months: 260px;
  --view-year: 240px;
  --view-pair: 200px;
  --view-single: 160px;
  --view-entry: 200px;

  /* z order */
  --z-art: 0;
  --z-overlay: 1;
  --z-top: 20;
  --z-tabs: 20;
  --z-sheet: 40;
  /* a popover belongs to the topmost layer it opened from (the day sheet's math badges, the ics fallback), so it sits
     over the sheet and under the toast; a sheet scroll closes it (round-18 H01) */
  --z-pop: 45;
  --z-toast: 50;

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-fall: cubic-bezier(.5, 0, .9, .5);
  --ease-plant: cubic-bezier(.3, 1.5, .5, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 400ms;
  --dur-4: 600ms;
}

@media (min-width: 760px) {
  :root {
    --gutter: 24px;
    --gap: 20px;
    --cols: 8;
    --fs-chip: 20px;
  }
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --gap: 24px;
    --cols: 12;
    --card-pad: 28px;
    --section-gap: 32px;
    --fs-h1: 40px;
    --fs-answer: 32px;
    --hit: 32px;
    --btn-h: 44px;
    --rail-h: 52px;
    --view-week: clamp(260px, 24vw, 360px);
    --view-months: clamp(320px, 28vw, 440px);
    --view-year: clamp(300px, 26vw, 400px);
    --view-pair: 300px;
    --view-single: 220px;
    --view-entry: clamp(320px, 40vh, 440px); /* SH01: 360 at 900 tall, 432 at 1080 */
  }
}