/* Theme: Almond Reader (almond-reader) */
/* A warm editorial serif theme featuring terracotta accents on cream, designed for calm, focused, and premium long-form reading experiences. */

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@layer base {
  :root {
    /* Warm-tinted taupe seeded from the muted secondary text to ground the interface in comfortable, bookish tones. */
    --palette-neutral-100: #FBFAFA;
    --palette-neutral-150: #FAF9F8;
    --palette-neutral-200: #F6F4F2;
    --palette-neutral-250: #EFECE8;
    --palette-neutral-300: #E5E1DA;
    --palette-neutral-350: #D9D2C9;
    --palette-neutral-400: #CAC0B4;
    --palette-neutral-450: #B7AB9C;
    --palette-neutral-500: #A19280;
    --palette-neutral-550: #877662;
    --palette-neutral-600: #6B5E4D;
    --palette-neutral-650: #53483B;
    --palette-neutral-700: #40372D;
    --palette-neutral-750: #302A22;
    --palette-neutral-800: #25201A;
    --palette-neutral-850: #1F1A15;
    --palette-neutral-900: #1D1914;
    /* The signature terracotta brand anchor, providing vibrant yet organic highlights. */
    --palette-brand-100: #FEF9F8;
    --palette-brand-150: #FEF7F6;
    --palette-brand-200: #FDF1EE;
    --palette-brand-250: #FCE6E1;
    --palette-brand-300: #FAD7CE;
    --palette-brand-350: #F7C4B7;
    --palette-brand-400: #F4AC9B;
    --palette-brand-450: #EF917A;
    --palette-brand-500: #EA7154;
    --palette-brand-550: #E4431C;
    --palette-brand-600: #B63414;
    --palette-brand-650: #8E280F;
    --palette-brand-700: #6D1E0B;
    --palette-brand-750: #531708;
    --palette-brand-800: #411206;
    --palette-brand-850: #360F05;
    --palette-brand-900: #320E05;
    --palette-danger-100: #FEF9F9;
    --palette-danger-150: #FDF7F6;
    --palette-danger-200: #FCF1EF;
    --palette-danger-250: #F9E7E4;
    --palette-danger-300: #F5D9D3;
    --palette-danger-350: #F1C7BF;
    --palette-danger-400: #EAB1A5;
    --palette-danger-450: #E39888;
    --palette-danger-500: #DA7A67;
    --palette-danger-550: #CF4E34;
    --palette-danger-600: #A73C26;
    --palette-danger-650: #832F1D;
    --palette-danger-700: #652416;
    --palette-danger-750: #4E1B11;
    --palette-danger-800: #3D150D;
    --palette-danger-850: #33120B;
    --palette-danger-900: #30100A;
    --palette-warning-100: #FDFAF5;
    --palette-warning-150: #FDF9F1;
    --palette-warning-200: #FBF4E6;
    --palette-warning-250: #F8ECD4;
    --palette-warning-300: #F4E0BA;
    --palette-warning-350: #EFD19A;
    --palette-warning-400: #E8BF72;
    --palette-warning-450: #DFA944;
    --palette-warning-500: #C28A22;
    --palette-warning-550: #9D701B;
    --palette-warning-600: #7C5815;
    --palette-warning-650: #614510;
    --palette-warning-700: #4A350C;
    --palette-warning-750: #392809;
    --palette-warning-800: #2C1F07;
    --palette-warning-850: #241A06;
    --palette-warning-900: #221805;
    --palette-success-100: #F9FBF8;
    --palette-success-150: #F7FAF6;
    --palette-success-200: #F0F6EE;
    --palette-success-250: #E5EFE2;
    --palette-success-300: #D6E6D0;
    --palette-success-350: #C2DABA;
    --palette-success-400: #AACA9E;
    --palette-success-450: #8EB87E;
    --palette-success-500: #6DA25A;
    --palette-success-550: #588348;
    --palette-success-600: #456839;
    --palette-success-650: #36512C;
    --palette-success-700: #293E21;
    --palette-success-750: #1F2F19;
    --palette-success-800: #182514;
    --palette-success-850: #141E10;
    --palette-success-900: #131C0F;
    --palette-info-100: #F8FAFC;
    --palette-info-150: #F6F9FB;
    --palette-info-200: #EFF5F7;
    --palette-info-250: #E4EDF2;
    --palette-info-300: #D5E3EA;
    --palette-info-350: #C1D6E0;
    --palette-info-400: #AAC5D3;
    --palette-info-450: #8EB2C4;
    --palette-info-500: #6E9BB2;
    --palette-info-550: #4F8099;
    --palette-info-600: #3E6679;
    --palette-info-650: #304F5E;
    --palette-info-700: #243C48;
    --palette-info-750: #1B2E37;
    --palette-info-800: #15232B;
    --palette-info-850: #111D23;
    --palette-info-900: #101B21;
    --palette-accent-100: #FCFAF9;
    --palette-accent-150: #FBF9F7;
    --palette-accent-200: #F8F4F0;
    --palette-accent-250: #F2EBE4;
    --palette-accent-300: #EBDFD4;
    --palette-accent-350: #E1D0C0;
    --palette-accent-400: #D4BDA7;
    --palette-accent-450: #C5A78A;
    --palette-accent-500: #B38E69;
    --palette-accent-550: #99724C;
    --palette-accent-600: #7A5A3B;
    --palette-accent-650: #5F462D;
    --palette-accent-700: #493522;
    --palette-accent-750: #37281A;
    --palette-accent-800: #2B1F14;
    --palette-accent-850: #231A10;
    --palette-accent-900: #21180F;
  }

  :root {
    --radius: 0.25rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --background: #F4F0E8;
    --foreground: #1A1612;
    --card: #FBF9F5;
    --card-foreground: var(--palette-neutral-900);
    --popover: #FBF9F5;
    --popover-foreground: var(--palette-neutral-900);
    --primary: var(--palette-brand-600);
    --primary-foreground: var(--palette-neutral-100);
    --secondary: var(--palette-neutral-200);
    --secondary-foreground: var(--palette-neutral-800);
    --muted: var(--palette-neutral-150);
    --muted-foreground: var(--palette-neutral-600);
    --accent: var(--palette-neutral-200);
    --accent-foreground: var(--palette-neutral-900);
    --destructive: var(--palette-danger-600);
    --destructive-foreground: var(--palette-neutral-100);
    --border: var(--palette-neutral-250);
    --input: var(--palette-neutral-300);
    --ring: var(--palette-brand-500);
    --chart-1: var(--palette-brand-500);
    --chart-2: var(--palette-accent-500);
    --chart-3: var(--palette-success-500);
    --chart-4: var(--palette-info-500);
    --chart-5: var(--palette-warning-500);
    --sidebar: #F4F0E8;
    --sidebar-foreground: var(--palette-neutral-800);
    --sidebar-primary: var(--palette-brand-600);
    --sidebar-primary-foreground: var(--palette-neutral-100);
    --sidebar-accent: var(--palette-neutral-200);
    --sidebar-accent-foreground: var(--palette-neutral-900);
    --sidebar-border: var(--palette-neutral-250);
    --sidebar-ring: var(--palette-brand-500);
    --font-sans: "Source Serif 4", system-ui, sans-serif;
    --font-display: "Fraunces", system-ui, sans-serif;
    --font-mono: "Source Code Pro", ui-monospace, monospace;
    --text-hero: 700 3.5rem/3.75rem var(--font-display);
    --text-hero-tracking: -0.02em;
    --text-title: 700 2.25rem/2.625rem var(--font-display);
    --text-heading: 600 1.5rem/2rem var(--font-display);
    --text-body: 400 1rem/1.5rem var(--font-sans);
    --text-caption: 400 0.75rem/1rem var(--font-sans);
    --text-label: 500 0.875rem/1.25rem var(--font-sans);
    --text-overline: 600 0.75rem/1rem var(--font-sans);
    --text-overline-tracking: 0.08em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0 1px 2px rgba(26,22,18,0.05);
    --shadow-sm: 0 2px 4px rgba(26,22,18,0.06);
    --shadow-md: 0 4px 8px rgba(26,22,18,0.08);
    --shadow-lg: 0 12px 24px rgba(26,22,18,0.1);
    --shadow-xl: 0 20px 32px rgba(26,22,18,0.12);
    --gradient-brand_wash: linear-gradient(135deg, #FDF1EE 0%, #F4F0E8 100%);
  }

  .dark {
    --background: #1A1612;
    --foreground: #F4F0E8;
    --card: #241E19;
    --card-foreground: var(--palette-neutral-100);
    --popover: #241E19;
    --popover-foreground: var(--palette-neutral-100);
    --primary: var(--palette-brand-500);
    --primary-foreground: #1A1612;
    --secondary: var(--palette-neutral-800);
    --secondary-foreground: var(--palette-neutral-200);
    --muted: var(--palette-neutral-850);
    --muted-foreground: var(--palette-neutral-400);
    --accent: var(--palette-neutral-800);
    --accent-foreground: var(--palette-neutral-100);
    --destructive: var(--palette-danger-500);
    --destructive-foreground: #1A1612;
    --border: var(--palette-neutral-800);
    --input: var(--palette-neutral-750);
    --ring: var(--palette-brand-500);
    --chart-1: var(--palette-brand-500);
    --chart-2: var(--palette-accent-500);
    --chart-3: var(--palette-success-500);
    --chart-4: var(--palette-info-500);
    --chart-5: var(--palette-warning-500);
    --sidebar: #15120E;
    --sidebar-foreground: var(--palette-neutral-300);
    --sidebar-primary: var(--palette-brand-500);
    --sidebar-primary-foreground: #1A1612;
    --sidebar-accent: var(--palette-neutral-800);
    --sidebar-accent-foreground: var(--palette-neutral-100);
    --sidebar-border: var(--palette-neutral-850);
    --sidebar-ring: var(--palette-brand-500);
  }
}

@layer base {
  * { border-color: var(--border); }
  body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); }
}

@layer components {
  .text-hero {
    font: var(--text-hero);
    letter-spacing: var(--text-hero-tracking);
  }
  .text-title {
    font: var(--text-title);
  }
  .text-heading {
    font: var(--text-heading);
  }
  .text-body {
    font: var(--text-body);
  }
  .text-caption {
    font: var(--text-caption);
  }
  .text-label {
    font: var(--text-label);
  }
  .text-overline {
    font: var(--text-overline);
    letter-spacing: var(--text-overline-tracking);
    text-transform: var(--text-overline-transform);
  }
}