/* ==========================================
   Light theme (default)
   ========================================== */
:root {
  color-scheme: light;

  /* Brand / primary colors */
  --color-primary: #ffb800;
  --color-primary-dark: #e5a500;
  --color-primary-light: #fff4c2;
  --color-primary-bg: #fffbea;
  --color-primary-20: rgba(255, 184, 0, 0.2);
  --color-primary-15: rgba(255, 184, 0, 0.15);

  /* Neutrals and backgrounds */
  --color-bg-page: #fdfbf7;
  --color-surface: #efece6;
  --color-surface-dark: #1a1b22;
  --color-text-main: #121216;
  --color-text-muted: #514532;
  --color-text-secondary: #9ca3af;
  --color-text-on-primary: #121216;
  --color-border: #d5c4ab;
  --color-accent-brown: var(--color-border);
  --color-teal: var(--color-success);
  --color-accent-orange: var(--color-error);
  --color-white: #ffffff;
  --color-black: #121216;

  /* Lavender tints */
  --color-lavender-light: #e3e1ea;
  --color-lavender-muted: #e8e7f0;
  --color-lavender-soft: #f4f2fc;

  /* Semantic colors */
  --color-error: #e05a1b;
  --color-error-dark: #a73a00;
  --color-error-20: rgba(224, 90, 27, 0.2);
  --color-error-15: rgba(224, 90, 27, 0.15);
  --color-error-10: rgba(224, 90, 27, 0.1);
  --color-danger-muted: #d9383a;
  --color-success: #14b8a6;
  --color-success-20: rgba(20, 184, 166, 0.2);
  --color-success-15: rgba(20, 184, 166, 0.15);

  /* Gradients */
  --gradient-primary: linear-gradient(180deg, #ffb800 0%, #e5a500 100%);

  /* Layout tokens */
  --page-gutter: 1.5rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  --space-xxxl: 7rem;

  /* Container tokens */
  --container-max-width: 77.5rem;

  /* Section spacing tokens */
  --section-padding-y-sm: var(--space-sm);
  --section-padding-y-lg: 6rem;
  --section-padding-y-xl: var(--space-xxxl);

  /* Card tokens */
  --card-min-width-sm: 16rem;
  --card-max-width-sm: 18rem;
  --card-min-width-md: 18rem;
  --card-max-width-md: 23rem;
  --card-max-width-lg: 30rem;
  --card-padding-md: var(--space-lg);
  --card-padding-lg: var(--space-xl);
  --card-gap-md: var(--space-lg);
  --card-gap-lg: var(--space-xl);

  /* Icon / asset sizing tokens */
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-xl: 3rem;
  --icon-size-xxl: 6rem;

  /* Content measure tokens */
  --measure-md: 35rem;
  --measure-sm: 30rem;

  /* Column / media sizing tokens */
  --column-min-width-sm: 18.75rem;
  --column-min-width-md: 25rem;
  --media-max-width-sm: 26.25rem;

  /* Component spacing tokens */
  --button-padding-y: 1rem;
  --button-padding-x: 1.5rem;
  --pill-padding-y: var(--space-sm);
  --pill-padding-x: var(--space-md);
  --tag-padding-y: var(--space-sm);
  --tag-padding-x: var(--space-md);

  /* Decorative tokens */
  --blur-xl: 7.5rem;
  --pattern-tile-size: 3.75rem;
  --decoration-size-sm: 0.6875rem;
  --decoration-offset-top: -0.75rem;
  --decoration-offset-bottom: -0.625rem;

  /* Radius tokens */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 9999px;

  /* Shadow tokens */
  --shadow-card: 0 4px 10px rgba(18, 18, 22, 0.04);
  --shadow-card-dark: 0 4px 10px rgba(18, 18, 22, 0.3);
  --shadow-elevated: 0 8px 32px rgba(18, 18, 22, 0.08);
  --shadow-floating: 0 4px 16px rgba(18, 18, 22, 0.08);
  --shadow-button: 0 4px 16px rgba(18, 18, 22, 0.06);

  /* Border tokens */
  --border-width: 1px;

  /* Motion tokens */
  --transition-fast: 150ms;

  /* Motion system */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;
  --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-lift: -6px;
  --motion-lift-sm: -4px;
  --motion-scale: 1.04;
  --motion-scale-sm: 1.02;
  --motion-icon-shift: 4px;
  --shadow-hover: 0 12px 28px rgba(18, 18, 22, 0.12);
  --shadow-hover-dark: 0 12px 28px rgba(18, 18, 22, 0.35);
  --shadow-focus: 0 0 0 3px var(--color-primary-20);

  /* Marquee tokens */
  --marquee-duration: 30s;
  --marquee-bee-float-duration: 3s;

  /* Header tokens */
  --header-height: 4.5rem;
  --header-logo-height: 2.5rem;
  --header-cta-padding-block: 0.75rem;
  --header-cta-padding-inline: 1.25rem;
  --radius-md: 0.625rem;
  --border-width-thin: 1px;

  font-family: system-ui, sans-serif;
}

/* Dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary-light: rgba(255, 184, 0, 0.2);
  --color-primary-bg: #1a1a22;
  --color-bg-page: #121216;
  --color-surface: #1a1b22;
  --color-surface-dark: #1a1a22;
  --color-text-main: #ffffff;
  --color-text-muted: #e8e7f0;
  --color-text-secondary: #9ca3af;
  --color-text-on-primary: #121216;
  --color-border: #514532;
  --color-lavender-light: #1a1a22;
  --color-lavender-soft: #1a1b22;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary-light: rgba(255, 184, 0, 0.2);
    --color-primary-bg: #1a1a22;
    --color-bg-page: #121216;
    --color-surface: #1a1b22;
    --color-surface-dark: #1a1a22;
    --color-text-main: #ffffff;
    --color-text-muted: #e8e7f0;
    --color-text-secondary: #9ca3af;
    --color-text-on-primary: #121216;
    --color-border: #514532;
    --color-lavender-light: #1a1a22;
    --color-lavender-soft: #1a1b22;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* clip, not hidden: hidden would turn body into a scroll container and
     break the sticky header. */
  overflow-x: clip;
}

body {
  min-height: 100vh;
  color: var(--color-text-main);
  background: var(--color-bg-page);
  margin: 0;
  overflow-x: clip;
}

@media (min-width: 48rem) {
  :root {
    --page-gutter: 2rem;
  }
}

/* Header, footer, dialogs and page components: see ui.css. */