@import "tailwindcss";
@source './**/*.{ts,tsx}';

@theme inline {
  --font-serif: var(--font-heading, Newsreader), Georgia, serif;
  --font-sans: var(--font-ui, Inter), system-ui, sans-serif;
  --font-mono: var(--font-data, Geist Mono), ui-monospace, monospace;

  --color-surface: var(--surface);
  --color-surface-dim: var(--surface-dim);
  --color-surface-bright: var(--surface-bright);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container: var(--surface-container);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);
  --color-surface-variant: var(--surface-variant);
  --color-on-surface: var(--on-surface);
  --color-on-surface-variant: var(--on-surface-variant);
  --color-outline: var(--outline);
  --color-outline-variant: var(--outline-variant);
  --color-primary: var(--primary);
  --color-primary-container: var(--primary-container);
  --color-primary-foreground: var(--primary-foreground);
  --color-on-primary: var(--on-primary);
  --color-on-primary-container: var(--on-primary-container);
  --color-secondary: var(--secondary);
  --color-secondary-container: var(--secondary-container);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-tertiary: var(--tertiary);
  --color-tertiary-container: var(--tertiary-container);
  --color-destructive: var(--destructive, var(--tertiary));
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-lg: 0.5rem;
  --radius-md: var(--radius);
  --radius-sm: 0.25rem;

  --shadow-ambient: 0 24px 48px rgba(var(--shadow-tint), 0.14);
  --shadow-glow: 0 0 0 1px rgba(var(--shadow-tint), 0.12), 0 18px 48px rgba(var(--shadow-tint), 0.16);
}

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    --surface: #111111;
    --surface-dim: #0c0c0c;
    --surface-bright: #444444;
    --surface-container-lowest: #080808;
    --surface-container-low: #171615;
    --surface-container: #21201f;
    --surface-container-high: #2d2c2a;
    --surface-container-highest: #393735;
    --surface-variant: #34312f;

    --on-surface: #e5e2e1;
    --on-surface-variant: #b8beb8;

    --outline: #80867f;
    --outline-variant: #40453f;

    --primary: #edbf7f;
    --on-primary: #442b00;
    --primary-container: #60410b;
    --primary-foreground: #442b00;
    --on-primary-container: #fff5e6;

    --secondary: #abcfb8;
    --on-secondary: #163627;
    --secondary-container: #7b9e89;
    --secondary-foreground: #163627;

    --tertiary: #d28a73;
    --on-tertiary: #44180e;
    --tertiary-container: #7f4334;

    --background: var(--surface);
    --foreground: var(--on-surface);
    --card: var(--surface-container-low);
    --card-foreground: var(--on-surface);
    --muted: var(--surface-container);
    --muted-foreground: var(--on-surface-variant);
    --accent: var(--surface-container-high);
    --accent-foreground: var(--on-surface);
    --border: var(--outline-variant);
    --input: var(--outline-variant);
    --ring: var(--primary);
    --destructive: var(--tertiary);

    --radius: 0.375rem;
    --ghost-border: color-mix(in srgb, var(--outline-variant), transparent 74%);
    --shadow-tint: 96, 65, 11;
  }

  .light {
    --surface: #f7f5ef;
    --surface-dim: #ece7df;
    --surface-bright: #ffffff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #fbfaf8;
    --surface-container: #ede9e2;
    --surface-container-high: #e1dbd2;
    --surface-container-highest: #d5cec4;
    --surface-variant: #d0c9c1;

    --on-surface: #171615;
    --on-surface-variant: #595e58;

    --outline: #7f857e;
    --outline-variant: #d2d6cf;

    --primary: #7a5720;
    --on-primary: #ffffff;
    --primary-container: #edd7b3;
    --primary-foreground: #ffffff;
    --on-primary-container: #153526;

    --secondary: #446553;
    --on-secondary: #ffffff;
    --secondary-container: #abcfb8;
    --secondary-foreground: #ffffff;

    --tertiary: #8f4d3c;
    --on-tertiary: #ffffff;
    --tertiary-container: #e7b5aa;

    --background: var(--surface);
    --foreground: var(--on-surface);
    --card: var(--surface-container-low);
    --card-foreground: var(--on-surface);
    --muted: var(--surface-container);
    --muted-foreground: var(--on-surface-variant);
    --accent: var(--surface-container-high);
    --accent-foreground: var(--on-surface);
    --border: var(--outline-variant);
    --input: var(--outline-variant);
    --ring: var(--primary);
    --destructive: var(--tertiary);

    --ghost-border: color-mix(in srgb, var(--outline-variant), transparent 62%);
    --shadow-tint: 96, 65, 11;
  }
}

@layer base {
  * {
    border-color: var(--ghost-border);
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
    background: var(--surface);
    font-size: 14px;
  }

  body {
    min-height: 100vh;
    margin: 0;
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-ui, Inter, system-ui, sans-serif);
    font-size: 0.875rem;
    pointer-events: auto !important;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer components {
  .glass-panel {
    background: var(--surface-container-low);
  }
}
