:root {
  color-scheme: light;

  /* Colors */
  --foreground: #12161c;
  --background: #f2ece2;
  --accent: #283241;
  --secondary: #6b0c0e;
  --surface: #f2ece2;
  --surface-alt: #d2cec0;
  --muted: #6b6759;
  --border: rgba(0,0,0,0.2);
  --highlight: #9f1113;
  --neutral-1: #6b6759;
  --neutral-2: #8f8b7d;
  --neutral-3: #f2ece2;
  --foreground-dim: #000000;
  --background-light: #ffffff;
  --background-dark: #e2d5bf;
  --highlight-bright: #b00002;
  --highlight-dim: #8d2324;
  --secondary-bright: #740305;
  --secondary-dim: #621517;
  --neutral-1-lighter: #878270;
  --neutral-3-darker: #e2d5bf;
  --accent-red: #9f1111;
  --accent-green: #119f11;
  --accent-blue: #11119f;
  --accent-yellow: #9f9f11;
  --accent-purple: #70119f;
  --accent-cyan: #119f9f;

  /* Semantic aliases — referenced directly by layout.css */
  --color-heading: var(--foreground);

  /* Input icons — chevron colored with the theme's --foreground
     (SVG data URIs can't reference CSS variables, so it's defined here) */
  --input-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1812' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Native date/time picker icon, colored with the theme's --foreground */
  --input-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 3.5h11v9h-11zM4 1v4M10 1v4M1.5 6.5h11' stroke='%231a1812' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --color-link: var(--accent);
  --color-link-hover: var(--secondary);

  /* Shadows
     Letterpress text effect on body text, plus bevel-style box
     shadows for dialogs and inset-style for form inputs. */
  --text-shadow:
    -0.5px -0.5px 0 rgba(0, 0, 0, 0.40),
     0.5px  0.5px 0 rgba(255, 255, 255, 0.7);
  --box-shadow:
    0.5px 0.5px 0 rgba(0, 0, 0, 0.40),
    -0.5px -0.5px 0 rgba(255, 255, 255, 1);
  --box-shadow-inset:
    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.20),
    inset -0.5px -0.5px 3px 1px rgba(255, 255, 255, 0.6);

  /* Fonts */
  --font-header: 'Roboto Condensed', sans-serif;
  --font-ui: 'Roboto Condensed', sans-serif;
  --font-mono: 'Atkynson Mono Nerd Font', monospace;
  --font-body: "EB Garamond", serif;
  --font-weight-h1: 400;
  --font-weight-h2: 400;
  --font-weight-h3: 400;
  --font-weight-body: 400;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-body: 16px;
}

/* Dark theme — applied when the user's device requests a dark
   color scheme. Values mirror dataroom-dark-theme.css; fonts are
   identical between the two themes so they are not repeated. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Colors */
    --foreground: #e5c7a9;
    --background: #1b1c25;
    --accent: #ffe6bd;
    --secondary: #8b7963;
    --surface: #1b1c25;
    --surface-alt: #1b1c25;
    --muted: #aa9d7e;
    --border: #e5c7a9;
    --highlight: #d9d3c9;
    --neutral-1: #868074;
    --neutral-2: #22242f;
    --neutral-3: #1b1c25;
    --foreground-dim: #bc7b39;
    --background-light: #3b3d51;
    --background-dark: #050608;
    --highlight-bright: #e2d5c0;
    --highlight-dim: #d1d1d1;
    --secondary-bright: #c4ad92;
    --secondary-dim: #ababab;
    --neutral-1-lighter: #9e998f;
    --neutral-3-darker: #050608;
    --accent-red: #d9c9c9;
    --accent-green: #c9d9c9;
    --accent-blue: #c9c9d9;
    --accent-yellow: #d9d9c9;
    --accent-purple: #d4c9d9;
    --accent-cyan: #c9d9d9;

    /* Input icons — chevron colored with the theme's --foreground
       (SVG data URIs can't reference CSS variables, so it's defined here) */
    --input-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e5c7a9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Native date/time picker icon, colored with the theme's --foreground */
    --input-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 3.5h11v9h-11zM4 1v4M10 1v4M1.5 6.5h11' stroke='%23e5c7a9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Shadows
       Letterpress effect adapted for a dark surface: the dark
       shadow is deepened and the light highlight is softened so
       the engrave stays subtle instead of glowing. */
    --text-shadow:
      -0.5px -0.5px 0 rgba(0, 0, 0, 0.40),
       0.5px  0.5px 0 rgba(255, 255, 255, 0.7);
    --box-shadow:
      0.5px 0.5px 0 rgba(0, 0, 0, 0.60),
      -0.5px -0.5px 0 rgba(255, 255, 255, 0.12);
    --box-shadow-inset:
      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.50),
      inset -0.5px -0.5px 3px 1px rgba(255, 255, 255, 0.10);
  }
}