/* THEME — EDITORIAL
   A warm, typographic brand. Demonstrates a theme that changes hue, typeface, and
   shape language at once, without touching a single component file.

   What a theme is allowed to override: primitive ramps (to introduce brand hues),
   semantic roles, and font families. What it must not do: add new token names, or
   reach into component internals.

   Link after styles.css:
     <link rel="stylesheet" href="tokens/themes/theme-editorial.css"> */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

:root {
  /* Brand hue: a warm terracotta. Replaces the primary ramp in place, so every
     semantic role that referenced primary follows automatically. */
  --dt-color-primary-050: oklch(0.971 0.016 45);
  --dt-color-primary-100: oklch(0.939 0.038 45);
  --dt-color-primary-200: oklch(0.892 0.070 45);
  --dt-color-primary-300: oklch(0.820 0.112 45);
  --dt-color-primary-400: oklch(0.735 0.148 45);
  --dt-color-primary-500: oklch(0.660 0.166 45);
  --dt-color-primary-600: oklch(0.585 0.162 45);
  --dt-color-primary-700: oklch(0.505 0.140 45);
  --dt-color-primary-800: oklch(0.430 0.117 45);
  --dt-color-primary-900: oklch(0.372 0.097 45);
  --dt-color-primary-950: oklch(0.262 0.070 45);

  /* Warm the neutrals. Cool grays fight a warm primary. */
  --dt-color-neutral-050: oklch(0.986 0.004 75);
  --dt-color-neutral-100: oklch(0.968 0.006 75);
  --dt-color-neutral-200: oklch(0.928 0.009 75);
  --dt-color-neutral-300: oklch(0.872 0.012 75);
  --dt-color-neutral-400: oklch(0.712 0.014 75);
  --dt-color-neutral-500: oklch(0.560 0.014 75);
  --dt-color-neutral-600: oklch(0.444 0.014 75);
  --dt-color-neutral-700: oklch(0.364 0.013 75);
  --dt-color-neutral-800: oklch(0.277 0.011 75);
  --dt-color-neutral-900: oklch(0.209 0.009 75);
  --dt-color-neutral-950: oklch(0.149 0.008 75);

  /* Typography: serif for editorial voice, sans for UI chrome. */
  --dt-font-family-serif: "Source Serif 4", ui-serif, Georgia, serif;
  --dt-text-display-2xl-family: var(--dt-font-family-serif);
  --dt-text-display-xl-family: var(--dt-font-family-serif);
  --dt-text-display-lg-family: var(--dt-font-family-serif);
  --dt-text-display-md-family: var(--dt-font-family-serif);
  --dt-text-display-sm-family: var(--dt-font-family-serif);
  --dt-text-heading-xl-family: var(--dt-font-family-serif);
  --dt-text-heading-lg-family: var(--dt-font-family-serif);
  --dt-text-heading-md-family: var(--dt-font-family-serif);
  --dt-text-display-2xl-weight: var(--dt-font-weight-regular);
  --dt-text-display-xl-weight: var(--dt-font-weight-regular);
  --dt-text-display-lg-weight: var(--dt-font-weight-regular);
  --dt-text-display-md-weight: var(--dt-font-weight-regular);
  --dt-text-display-sm-weight: var(--dt-font-weight-regular);
  --dt-text-body-md-size: var(--dt-font-size-lg);
  --dt-text-body-md-line: var(--dt-line-height-lg);

  /* Shape: softer containers, pill controls. */
  --dt-radius-control: var(--dt-radius-raw-full);
  --dt-radius-container: var(--dt-radius-raw-16);
  --dt-radius-overlay: var(--dt-radius-raw-24);
  --dt-radius-media: var(--dt-radius-raw-12);

  /* A warm page ground rather than pure white. */
  --dt-surface-base: oklch(0.990 0.006 80);
  --dt-surface-subtle: oklch(0.972 0.010 80);
}