/* ============================================================
   Guided — design tokens (single source: packages/theme)
   Root palette, day themes, horizon, pebble shapes.
   Consumed by apps/room and guided-app; derived from
   project/DESIGN.md. This is the only copy — change it here.
   ============================================================ */

:root {
  /* canvas */
  --paper: oklch(0.97 0.012 95);
  --paper-deep: oklch(0.945 0.018 100);
  --paper-well: oklch(0.915 0.02 100);
  --ink: oklch(0.28 0.02 140);
  --ink-soft: oklch(0.44 0.025 130);
  --ink-faint: oklch(0.58 0.02 120);
  --line: oklch(0.86 0.02 110);

  /* identity */
  --moss: oklch(0.42 0.07 145);
  --moss-deep: oklch(0.32 0.06 150);
  --moss-tint: oklch(0.9 0.04 140);
  --amber: oklch(0.75 0.13 70);
  --amber-deep: oklch(0.52 0.11 60);
  --amber-tint: oklch(0.93 0.05 80);

  /* element accents: dot (solid), deep (AA text), tint (wash) */
  --el-checkin: oklch(0.78 0.12 70);
  --el-checkin-deep: oklch(0.5 0.11 60);
  --el-checkin-tint: oklch(0.94 0.04 80);
  --el-keynote: oklch(0.62 0.09 310);
  --el-keynote-deep: oklch(0.44 0.1 310);
  --el-keynote-tint: oklch(0.93 0.03 310);
  --el-discussion: oklch(0.58 0.09 145);
  --el-discussion-deep: oklch(0.4 0.08 145);
  --el-discussion-tint: oklch(0.93 0.035 145);
  --el-breakout: oklch(0.62 0.08 185);
  --el-breakout-deep: oklch(0.42 0.07 185);
  --el-breakout-tint: oklch(0.93 0.03 185);
  --el-reflection: oklch(0.65 0.08 235);
  --el-reflection-deep: oklch(0.44 0.08 240);
  --el-reflection-tint: oklch(0.93 0.03 235);
  --el-vote: oklch(0.62 0.11 40);
  --el-vote-deep: oklch(0.45 0.11 38);
  --el-vote-tint: oklch(0.94 0.035 45);
  --el-summary: oklch(0.65 0.07 105);
  --el-summary-deep: oklch(0.44 0.06 105);
  --el-summary-tint: oklch(0.94 0.03 105);
  --el-energizer: oklch(0.68 0.13 30);
  --el-energizer-deep: oklch(0.48 0.13 28);
  --el-energizer-tint: oklch(0.94 0.04 35);
  --el-checkout: oklch(0.55 0.08 285);
  --el-checkout-deep: oklch(0.42 0.09 285);
  --el-checkout-tint: oklch(0.93 0.03 285);
  --el-open: oklch(0.62 0.025 105);
  --el-open-deep: oklch(0.42 0.03 110);
  --el-open-tint: oklch(0.94 0.016 100);

  /* author palette: stable document names over theme-aware tokens */
  --accent-sunrise: var(--el-checkin);
  --accent-sunrise-deep: var(--el-checkin-deep);
  --accent-sunrise-tint: var(--el-checkin-tint);
  --accent-moss: var(--el-discussion);
  --accent-moss-deep: var(--el-discussion-deep);
  --accent-moss-tint: var(--el-discussion-tint);
  --accent-sky: var(--el-reflection);
  --accent-sky-deep: var(--el-reflection-deep);
  --accent-sky-tint: var(--el-reflection-tint);
  --accent-twilight: var(--el-checkout);
  --accent-twilight-deep: var(--el-checkout-deep);
  --accent-twilight-tint: var(--el-checkout-tint);

  /* phases */
  --ph-morning-a: oklch(0.85 0.09 60);
  --ph-morning-b: oklch(0.88 0.06 230);
  --ph-noon-a: oklch(0.88 0.05 230);
  --ph-noon-b: oklch(0.9 0.05 140);
  --ph-golden-a: oklch(0.8 0.11 60);
  --ph-golden-b: oklch(0.58 0.08 300);
  --ph-twilight-a: oklch(0.46 0.08 285);
  --ph-twilight-b: oklch(0.31 0.04 260);

  /* raised surfaces & on-color text */
  --card: oklch(0.99 0.008 100);
  --card-hi: oklch(0.995 0.006 100);
  --card-moss: oklch(0.985 0.012 120);
  --on-moss: oklch(0.97 0.015 120);
  --on-amber: oklch(0.25 0.05 60);
  --media-well: oklch(0.18 0.018 135);
  --on-media: oklch(0.96 0.01 95);
  --amber-line: oklch(0.85 0.07 75);
  --moss-tint-strong: oklch(0.86 0.05 140);

  /* session-room washes per phase */
  --wash-morning: oklch(0.95 0.035 75);
  --wash-noon: oklch(0.95 0.025 230);
  --wash-golden-a: oklch(0.93 0.05 70);
  --wash-golden-b: oklch(0.965 0.018 90);
  --wash-twilight-a: oklch(0.88 0.035 285);
  --wash-twilight-b: oklch(0.955 0.015 95);

  /* nature backdrops stay a whisper */
  --nature-opacity: 0.1;
  --nature-filter: saturate(0.85);

  --shadow-soft: 0 2px 12px oklch(0.4 0.04 120 / 0.1);
  --shadow-lift: 0 6px 24px oklch(0.4 0.05 120 / 0.14);

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;

  --font-ui: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans',
    source-sans-pro, 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ---------- dusk: the dark theme ----------
   Not gray — the room after sunset. Deep twilight indigo,
   moss and amber carried over, brighter where they were deep. */
html[data-theme='dusk'] {
  color-scheme: dark;

  --paper: oklch(0.23 0.022 285);
  --paper-deep: oklch(0.27 0.025 285);
  --paper-well: oklch(0.31 0.028 285);
  --ink: oklch(0.93 0.015 95);
  --ink-soft: oklch(0.78 0.02 95);
  --ink-faint: oklch(0.61 0.025 285);
  --line: oklch(0.35 0.027 285);

  --moss: oklch(0.58 0.08 145);
  --moss-deep: oklch(0.82 0.07 140);
  --moss-tint: oklch(0.36 0.05 148);
  --amber-deep: oklch(0.83 0.11 75);
  --amber-tint: oklch(0.37 0.055 70);

  --card: oklch(0.27 0.025 285);
  --card-hi: oklch(0.3 0.026 285);
  --card-moss: oklch(0.29 0.034 170);
  --amber-line: oklch(0.49 0.08 70);
  --moss-tint-strong: oklch(0.42 0.06 145);

  --el-checkin-deep: oklch(0.84 0.1 75);
  --el-checkin-tint: oklch(0.34 0.05 75);
  --el-keynote-deep: oklch(0.8 0.09 310);
  --el-keynote-tint: oklch(0.33 0.045 310);
  --el-discussion-deep: oklch(0.8 0.09 145);
  --el-discussion-tint: oklch(0.33 0.045 145);
  --el-breakout-deep: oklch(0.8 0.08 185);
  --el-breakout-tint: oklch(0.33 0.04 185);
  --el-reflection-deep: oklch(0.8 0.08 235);
  --el-reflection-tint: oklch(0.33 0.04 235);
  --el-vote-deep: oklch(0.8 0.1 40);
  --el-vote-tint: oklch(0.34 0.05 40);
  --el-summary-deep: oklch(0.83 0.08 105);
  --el-summary-tint: oklch(0.33 0.04 105);
  --el-energizer-deep: oklch(0.8 0.11 30);
  --el-energizer-tint: oklch(0.34 0.05 32);
  --el-checkout-deep: oklch(0.8 0.08 285);
  --el-checkout-tint: oklch(0.34 0.045 285);
  --el-open-deep: oklch(0.8 0.025 100);
  --el-open-tint: oklch(0.33 0.02 100);

  --wash-morning: oklch(0.3 0.045 75);
  --wash-noon: oklch(0.29 0.035 240);
  --wash-golden-a: oklch(0.3 0.05 70);
  --wash-golden-b: oklch(0.24 0.022 285);
  --wash-twilight-a: oklch(0.28 0.05 290);
  --wash-twilight-b: oklch(0.215 0.02 285);

  --nature-opacity: 0.17;
  --nature-filter: saturate(0.75) brightness(0.55);

  --shadow-soft: 0 2px 12px oklch(0.08 0.02 285 / 0.5);
  --shadow-lift: 0 6px 24px oklch(0.08 0.02 285 / 0.6);
}
/* ---------- the rest of the day ----------
   The day wheel covers a full day. Noon is the :root baseline;
   the light shifts around it the way a room does. */

/* morning: fresh, a touch rosy, dew still on things */
html[data-theme='morning'] {
  --paper: oklch(0.968 0.018 80);
  --paper-deep: oklch(0.94 0.025 85);
  --paper-well: oklch(0.91 0.028 85);
  --line: oklch(0.855 0.026 90);
  --card: oklch(0.985 0.012 85);
  --card-hi: oklch(0.99 0.01 85);
  --nature-opacity: 0.12;
}

/* golden hour: honeyed, long warm light */
html[data-theme='golden'] {
  --paper: oklch(0.955 0.03 85);
  --paper-deep: oklch(0.925 0.04 88);
  --paper-well: oklch(0.895 0.045 90);
  --line: oklch(0.84 0.04 92);
  --card: oklch(0.975 0.022 88);
  --card-hi: oklch(0.982 0.02 90);
  --card-moss: oklch(0.97 0.025 110);
  --amber-tint: oklch(0.91 0.06 80);
  --nature-opacity: 0.13;
  --nature-filter: saturate(1) sepia(0.12);
}

/* twilight: the light is leaving, lavender settles in. Still a light theme. */
html[data-theme='twilight'] {
  --paper: oklch(0.885 0.022 300);
  --paper-deep: oklch(0.85 0.026 300);
  --paper-well: oklch(0.815 0.028 300);
  --ink: oklch(0.26 0.026 295);
  --ink-soft: oklch(0.4 0.028 295);
  --ink-faint: oklch(0.52 0.026 295);
  --line: oklch(0.765 0.028 300);
  --card: oklch(0.915 0.018 300);
  --card-hi: oklch(0.93 0.016 300);
  --card-moss: oklch(0.9 0.025 180);
  --moss-tint: oklch(0.81 0.05 150);
  --amber-tint: oklch(0.85 0.06 78);
  --amber-line: oklch(0.78 0.08 75);
  --wash-morning: oklch(0.85 0.04 75);
  --wash-noon: oklch(0.85 0.03 240);
  --wash-golden-a: oklch(0.84 0.05 70);
  --wash-golden-b: oklch(0.88 0.022 300);
  --wash-twilight-a: oklch(0.8 0.05 295);
  --wash-twilight-b: oklch(0.87 0.02 300);
  --nature-opacity: 0.14;
  --nature-filter: saturate(0.7) brightness(0.92);
  --shadow-soft: 0 2px 12px oklch(0.3 0.04 300 / 0.14);
  --shadow-lift: 0 6px 24px oklch(0.3 0.05 300 / 0.18);
}

/* night: the house is quiet. Near-black, low chroma, amber as a candle. */
html[data-theme='night'] {
  color-scheme: dark;

  --paper: oklch(0.165 0.014 110);
  --paper-deep: oklch(0.2 0.016 105);
  --paper-well: oklch(0.24 0.018 105);
  --ink: oklch(0.9 0.012 95);
  --ink-soft: oklch(0.73 0.015 95);
  --ink-faint: oklch(0.57 0.018 95);
  --line: oklch(0.3 0.02 105);

  --moss: oklch(0.55 0.07 145);
  --moss-deep: oklch(0.79 0.06 140);
  --moss-tint: oklch(0.3 0.04 150);
  --amber: oklch(0.71 0.11 70);
  --amber-deep: oklch(0.8 0.1 75);
  --amber-tint: oklch(0.3 0.045 70);

  --card: oklch(0.2 0.016 105);
  --card-hi: oklch(0.225 0.018 105);
  --card-moss: oklch(0.215 0.026 145);
  --media-well: oklch(0.12 0.014 120);
  --on-media: oklch(0.92 0.014 95);
  --amber-line: oklch(0.43 0.07 70);
  --moss-tint-strong: oklch(0.36 0.05 145);

  --el-checkin-deep: oklch(0.8 0.09 75);
  --el-checkin-tint: oklch(0.28 0.04 75);
  --el-keynote-deep: oklch(0.77 0.08 310);
  --el-keynote-tint: oklch(0.27 0.038 310);
  --el-discussion-deep: oklch(0.77 0.08 145);
  --el-discussion-tint: oklch(0.27 0.038 145);
  --el-breakout-deep: oklch(0.77 0.07 185);
  --el-breakout-tint: oklch(0.27 0.034 185);
  --el-reflection-deep: oklch(0.77 0.07 235);
  --el-reflection-tint: oklch(0.27 0.034 235);
  --el-vote-deep: oklch(0.77 0.09 40);
  --el-vote-tint: oklch(0.28 0.042 40);
  --el-summary-deep: oklch(0.79 0.07 105);
  --el-summary-tint: oklch(0.27 0.034 105);
  --el-energizer-deep: oklch(0.77 0.1 30);
  --el-energizer-tint: oklch(0.28 0.042 32);
  --el-checkout-deep: oklch(0.77 0.07 285);
  --el-checkout-tint: oklch(0.28 0.038 285);
  --el-open-deep: oklch(0.77 0.025 100);
  --el-open-tint: oklch(0.27 0.018 100);

  --wash-morning: oklch(0.23 0.035 75);
  --wash-noon: oklch(0.22 0.03 95);
  --wash-golden-a: oklch(0.23 0.04 70);
  --wash-golden-b: oklch(0.175 0.016 105);
  --wash-twilight-a: oklch(0.21 0.038 290);
  --wash-twilight-b: oklch(0.155 0.014 105);

  --ph-morning-a: oklch(0.42 0.09 65);
  --ph-morning-b: oklch(0.3 0.045 120);
  --ph-noon-a: oklch(0.34 0.07 72);
  --ph-noon-b: oklch(0.27 0.045 135);
  --ph-golden-a: oklch(0.4 0.09 60);
  --ph-golden-b: oklch(0.25 0.035 95);
  --ph-twilight-a: oklch(0.28 0.04 70);
  --ph-twilight-b: oklch(0.18 0.018 105);

  --nature-opacity: 0.13;
  --nature-filter: saturate(0.72) sepia(0.12) brightness(0.46);

  --shadow-soft: 0 2px 12px oklch(0.05 0.014 105 / 0.55);
  --shadow-lift: 0 6px 24px oklch(0.05 0.016 105 / 0.65);
}

/* a knob that stays visible on a dark track */
html[data-theme='dusk'] .switch::after,
html[data-theme='night'] .switch::after {
  background: oklch(0.86 0.012 285);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- horizon & shell ---------- */

.horizon {
  height: 7px;
  width: 100%;
}
.horizon[data-phase='morning'] {
  background: linear-gradient(90deg, var(--ph-morning-a), var(--ph-morning-b));
}
.horizon[data-phase='noon'] {
  background: linear-gradient(90deg, var(--ph-noon-a), var(--ph-noon-b));
}
.horizon[data-phase='golden'] {
  background: linear-gradient(90deg, var(--ph-golden-a), var(--ph-golden-b));
}
.horizon[data-phase='twilight'] {
  background: linear-gradient(90deg, var(--ph-twilight-a), var(--ph-twilight-b));
}


/* pebble geometry — the shape belongs to the token layer */
/* pebble avatar */
.pebble {
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--on-moss);
  background: var(--moss);
  user-select: none;
  position: relative;
  overflow: hidden;
}
.pebble img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* earthy tones for crowds without portraits */
.pebble[data-tone='1'] { background: oklch(0.52 0.06 50); }
.pebble[data-tone='2'] { background: oklch(0.5 0.05 250); }
.pebble[data-tone='3'] { background: oklch(0.55 0.06 110); }
.pebble[data-tone='4'] { background: oklch(0.47 0.05 75); }
.pebble[data-shape='1'] { border-radius: 58% 42% 55% 45% / 52% 48% 60% 40%; }
.pebble[data-shape='2'] { border-radius: 45% 55% 48% 52% / 58% 44% 56% 42%; }
.pebble[data-shape='3'] { border-radius: 52% 48% 60% 40% / 45% 55% 48% 52%; }
.pebble[data-shape='4'] { border-radius: 60% 40% 50% 50% / 50% 58% 42% 50%; }
.pebble[data-shape='5'] { border-radius: 44% 56% 52% 48% / 55% 45% 58% 42%; }
.pebble[data-shape='6'] { border-radius: 55% 45% 42% 58% / 48% 52% 45% 55%; }
.pebble[data-shape='0'] { border-radius: 50% 50% 56% 44% / 56% 44% 50% 50%; }