/* TaleTerra website tokens: Source -> Semantic -> Component. */
:root {
  color-scheme: dark;

  /* Source colors inherited from the approved mobile brand palette. */
  --source-brand-primary: #eeb492;
  --source-brand-subtle-light: #ffdfcd;
  --source-brand-subtle-dark: #463328;
  --source-background-primary-light: #f1f1f5;
  --source-background-primary-dark: #000000;
  --source-background-reading-light: #f2efe4;
  --source-background-reading-dark: #212123;
  --source-background-tertiary-light: #f6f4ec;
  --source-surface-primary-light: #ffffff;
  --source-surface-primary-dark: #141414;
  --source-surface-secondary-light: #fffdf5;
  --source-surface-secondary-dark: #2e2e30;
  --source-foreground-primary-light: #1b1c21;
  --source-foreground-primary-dark: #f5f4fc;
  --source-foreground-reading-light: #37322b;
  --source-foreground-reading-dark: #8b8b8b;
  --source-divider-light: #dcdcdc;
  --source-divider-dark: #3a3a3a;
  --source-status-danger: #ff1515;

  /* Website-specific neutral sources add depth without a competing hue. */
  --source-web-night: #09090b;
  --source-web-graphite: #18171b;
  --source-web-warm-shadow: #241b17;

  /* Source typography, geometry, and timing. */
  --source-font-display: "Avenir Next", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --source-font-body: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --source-radius-xs: 4px;
  --source-radius-sm: 6px;
  --source-radius-md: 8px;
  --source-site-max: 1240px;
  --source-duration-fast: 160ms;
  --source-duration-base: 320ms;
  --source-duration-scene: 1100ms;
  --source-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

:root {
  /* Semantic colors: the website has one immersive dark theme. */
  --color-brand-primary: var(--source-brand-primary);
  --color-brand-text: var(--source-brand-primary);
  --color-brand-subtle: var(--source-brand-subtle-dark);
  --color-background-primary: var(--source-background-primary-dark);
  --color-background-depth: var(--source-web-night);
  --color-background-reading: var(--source-background-reading-dark);
  --color-background-tertiary: var(--source-web-graphite);
  --color-surface-primary: var(--source-surface-primary-dark);
  --color-surface-secondary: var(--source-surface-secondary-dark);
  --color-foreground-primary: var(--source-foreground-primary-dark);
  --color-foreground-secondary: color-mix(in srgb, var(--color-foreground-primary) 68%, transparent);
  --color-foreground-tertiary: color-mix(in srgb, var(--color-foreground-primary) 48%, transparent);
  --color-foreground-on-brand: var(--source-foreground-primary-light);
  --color-foreground-reading: var(--source-foreground-reading-dark);
  --color-border-default: var(--source-divider-dark);
  --color-border-quiet: color-mix(in srgb, var(--color-border-default) 56%, transparent);
  --color-focus: var(--color-brand-primary);
  --color-status-danger: var(--source-status-danger);
  --color-shadow-ambient: color-mix(in srgb, var(--source-background-primary-dark) 72%, transparent);
  --color-shadow-brand: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
  --color-shadow-warm: color-mix(in srgb, var(--source-web-warm-shadow) 66%, transparent);
}

:root {
  /* Semantic typography and layout. */
  --font-display: var(--source-font-display);
  --font-body: var(--source-font-body);
  --radius-control: var(--source-radius-xs);
  --radius-frame: var(--source-radius-md);
  --site-max: var(--source-site-max);
  --motion-fast: var(--source-duration-fast);
  --motion-base: var(--source-duration-base);
  --motion-scene: var(--source-duration-scene);
  --ease-out: var(--source-ease-out);

  /* Component tokens. */
  --component-body-background: var(--color-background-primary);
  --component-body-content: var(--color-foreground-primary);
  --component-selection-background: var(--color-brand-subtle);
  --component-selection-content: var(--color-foreground-primary);
  --component-annotation-content: var(--color-brand-text);

  --component-header-background: color-mix(in srgb, var(--color-surface-primary) 88%, transparent);
  --component-header-border: var(--color-border-quiet);
  --component-header-content: var(--color-foreground-primary);
  --component-header-hero-content: var(--source-foreground-primary-dark);
  --component-header-shadow: 0 12px 32px var(--color-shadow-ambient);

  --component-button-primary-container: var(--color-brand-primary);
  --component-button-primary-content: var(--color-foreground-on-brand);
  --component-button-primary-border: var(--color-brand-primary);
  --component-button-primary-shadow: 0 12px 30px var(--color-shadow-brand);
  --component-button-secondary-container: var(--color-surface-primary);
  --component-button-secondary-content: var(--color-foreground-primary);
  --component-button-secondary-border: var(--color-border-default);
  --component-button-secondary-shadow: 0 10px 24px var(--color-shadow-ambient);
  --component-icon-button-container: color-mix(in srgb, var(--color-surface-primary) 82%, transparent);
  --component-icon-button-content: var(--color-foreground-primary);
  --component-icon-button-border: var(--color-border-quiet);

  --component-hero-background: var(--source-background-primary-dark);
  --component-hero-content: var(--source-foreground-primary-dark);
  --component-hero-secondary: color-mix(in srgb, var(--source-foreground-primary-dark) 70%, transparent);
  --component-hero-veil: color-mix(in srgb, var(--source-background-primary-dark) 84%, transparent);
  --component-section-primary: var(--color-background-primary);
  --component-section-depth: var(--color-background-depth);
  --component-section-lifted: var(--color-surface-primary);
  --component-section-reading: var(--color-background-reading);
  --component-section-border: var(--color-border-quiet);
  --component-proof-stage: color-mix(in srgb, var(--color-background-reading) 72%, var(--color-background-depth));
  --component-proof-shadow: 18px 24px 52px var(--color-shadow-warm);

  --component-footer-background: var(--source-background-primary-dark);
  --component-footer-content: var(--source-foreground-primary-dark);
  --component-footer-secondary: color-mix(in srgb, var(--source-foreground-primary-dark) 58%, transparent);
  --component-footer-border: color-mix(in srgb, var(--source-foreground-primary-dark) 16%, transparent);
}