/**
 * Feelings Wheel Design Tokens
 *
 * All colors defined as HSL custom properties.
 * Light/dark themes swap values atomically via [data-theme].
 */

:root {
  /* Hue angles per core emotion (stable across themes) */
  --hue-happy: 48;        /* Warm yellow */
  --hue-sad: 215;         /* Cool blue */
  --hue-angry: 8;         /* Red */
  --hue-scared: 28;       /* Orange */
  --hue-surprised: 185;   /* Teal/cyan */
  --hue-disgusted: 145;   /* Green */

  /* Base saturation (adjusted per theme) */
  --tier-sat: 68%;

  /* Animation durations */
  --transition-fast: 100ms;
  --transition-normal: 150ms;
  --transition-slow: 300ms;
}

:root,
:root[data-theme="light"] {
  /* Light theme */
  --bg: #FAF9F7;
  --fg: #1A1A1A;

  /* Tier luminances - lighter toward outer tier */
  --tier-1-l: 58%;
  --tier-2-l: 70%;
  --tier-3-l: 82%;

  /* Adjusted saturation for light theme */
  --tier-sat: 68%;

  /* Wedge borders - subtle dark for separation */
  --wedge-border: rgba(0, 0, 0, 8%);

  /* Focus ring - dark, visible on all wedges */
  --focus-ring: #1A1A1A;
  --focus-ring-width: 3px;

  /* Muted state for non-active tiers */
  --muted-opacity: 0.3;

  /* Text colors */
  --label-text: #1A1A1A;
  --label-text-large: #1A1A1A;

  /* UI elements */
  --button-bg: #E5E5E5;
  --button-fg: #1A1A1A;
  --button-hover-bg: #D4D4D4;
  --border-color: rgba(0, 0, 0, 12%);
  --link-color: #06C;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

:root[data-theme="dark"] {
  /* Dark theme */
  --bg: #141414;
  --fg: #F2F1EE;

  /* Tier luminances - darker toward outer tier (inverted from light) */
  --tier-1-l: 42%;
  --tier-2-l: 32%;
  --tier-3-l: 24%;

  /* Lower saturation for dark theme to reduce eye strain */
  --tier-sat: 55%;

  /* Wedge borders - subtle light for separation */
  --wedge-border: rgba(255, 255, 255, 8%);

  /* Focus ring - light, visible on all wedges */
  --focus-ring: #F2F1EE;
  --focus-ring-width: 3px;

  /* Muted state for non-active tiers */
  --muted-opacity: 0.3;

  /* Text colors */
  --label-text: #F2F1EE;
  --label-text-large: #F2F1EE;

  /* UI elements */
  --button-bg: #2A2A2A;
  --button-fg: #F2F1EE;
  --button-hover-bg: #3A3A3A;
  --border-color: rgba(255, 255, 255, 12%);
  --link-color: #4DA3FF;
}

/* High contrast mode preference */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="light"] {
    --wedge-border: rgba(0, 0, 0, 25%);
    --focus-ring-width: 4px;
    --tier-sat: 75%;
    --tier-1-l: 54%;
    --tier-2-l: 68%;
    --tier-3-l: 80%;
  }

  :root[data-theme="dark"] {
    --wedge-border: rgba(255, 255, 255, 25%);
    --focus-ring-width: 4px;
    --tier-sat: 65%;
    --tier-1-l: 40%;
    --tier-2-l: 30%;
    --tier-3-l: 22%;
  }
}

/* Wedge fill colors - computed from tokens */
.wedge-happy { --wedge-hue: var(--hue-happy); }
.wedge-sad { --wedge-hue: var(--hue-sad); }
.wedge-angry { --wedge-hue: var(--hue-angry); }
.wedge-scared { --wedge-hue: var(--hue-scared); }
.wedge-surprised { --wedge-hue: var(--hue-surprised); }
.wedge-disgusted { --wedge-hue: var(--hue-disgusted); }

.tier-1 { --wedge-l: var(--tier-1-l); }
.tier-2 { --wedge-l: var(--tier-2-l); }
.tier-3 { --wedge-l: var(--tier-3-l); }