/*
 * Tastola brand layer. Shared by every page.
 * Tokens and fonts mirror the Tastola dashboard (app/globals.css, app/layout.tsx).
 * Dark is the default. Warm paper light theme follows prefers-color-scheme: light.
 */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/brand/instrument-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/brand/instrument-serif.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/brand/instrument-serif-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Dark (default). */
:root {
  color-scheme: dark;
  --background: oklch(0.17 0.012 70);
  --foreground: oklch(0.95 0.012 85);
  --card: oklch(0.215 0.014 70);
  --popover: oklch(0.23 0.014 70);
  --primary: oklch(0.84 0.1 82);
  --primary-foreground: oklch(0.2 0.02 65);
  --primary-hover: oklch(0.89 0.09 84);
  --secondary: oklch(0.27 0.014 70);
  --muted: oklch(0.27 0.012 70);
  --muted-foreground: oklch(0.74 0.02 80);
  --accent: oklch(0.29 0.02 70);
  --border: oklch(0.92 0.02 85 / 12%);
  --border-strong: oklch(0.92 0.02 85 / 24%);
  --input: oklch(0.92 0.02 85 / 16%);
  --ring: oklch(0.74 0.1 78);
  --brass: oklch(0.82 0.11 80);
  --link: oklch(0.84 0.1 82);
  --positive: oklch(0.8 0.11 155);
  --negative: oklch(0.76 0.12 25);
  --warning: oklch(0.82 0.1 82);
  --chart-1: oklch(0.82 0.11 80);
  --chart-2: oklch(0.76 0.08 165);
  --chart-3: oklch(0.74 0.1 40);
  --chart-4: oklch(0.76 0.05 230);
  --chart-5: oklch(0.7 0.03 80);
  --glow: 26%;
  --shadow: 0 18px 50px oklch(0 0 0 / 35%);
  --radius: 0.8rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-xl: calc(var(--radius) * 1.4);
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", "Noto Serif TC", serif;
  --max: 1080px;
}

/* Warm paper (light). */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: oklch(0.972 0.008 85);
    --foreground: oklch(0.22 0.02 65);
    --card: oklch(0.995 0.004 85);
    --popover: oklch(0.995 0.004 85);
    --primary: oklch(0.36 0.06 65);
    --primary-foreground: oklch(0.98 0.01 85);
    --primary-hover: oklch(0.3 0.06 65);
    --secondary: oklch(0.94 0.012 85);
    --muted: oklch(0.94 0.01 85);
    --muted-foreground: oklch(0.45 0.02 65);
    --accent: oklch(0.94 0.02 85);
    --border: oklch(0.88 0.015 80);
    --border-strong: oklch(0.78 0.02 80);
    --input: oklch(0.88 0.015 80);
    --ring: oklch(0.62 0.09 70);
    --brass: oklch(0.58 0.12 68);
    --link: oklch(0.4 0.08 65);
    --positive: oklch(0.46 0.1 155);
    --negative: oklch(0.52 0.14 30);
    --warning: oklch(0.62 0.11 75);
    --chart-1: oklch(0.58 0.12 68);
    --chart-2: oklch(0.52 0.07 165);
    --chart-3: oklch(0.55 0.09 35);
    --chart-4: oklch(0.5 0.06 230);
    --chart-5: oklch(0.45 0.04 65);
    --glow: 20%;
    --shadow: 0 16px 40px oklch(0.3 0.04 65 / 12%);
  }
}

html {
  background: var(--background);
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  background-image: radial-gradient(
    900px 420px at 50% -140px,
    color-mix(in oklch, var(--brass) var(--glow), transparent),
    transparent 60%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--foreground);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in oklch, var(--brass) 35%, transparent);
}

h1,
h2 {
  text-wrap: balance;
}