/* =====================================================================
   globals.css — shadcn/ui design tokens for Everlasting Memory.

   These are the canonical HSL variables that shadcn generates when
   you run `npx shadcn@latest init`. Because this project runs
   React via CDN + in-browser Babel (no build step), we ship the
   tokens as a plain stylesheet and let Tailwind Play CDN's
   arbitrary-value engine pick them up via
      <div class="bg-primary text-primary-foreground">
   which resolves via the `tailwind.config` block on each page.

   The palette is the warm-amber / charcoal / white theme from the
   reference screenshot:
     - background:  pure white
     - foreground:  near-black charcoal
     - primary:     warm amber #B88644 for CTAs, links, active states
     - muted:       very light grey surfaces + medium grey text
     - border:      subtle grey used on every card, input and pill
     - ring:        amber focus glow
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700&display=swap');

@layer base {
  :root {
    /* Neutral surfaces */
    --background: 0 0% 100%;              /* #FFFFFF */
    --foreground: 224 14% 7%;             /* #0F1014 near-black charcoal */

    --card: 0 0% 100%;                    /* #FFFFFF */
    --card-foreground: 224 14% 7%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 14% 7%;

    /* Primary — flat brand gold #D1A150 (all gold CTAs share this) */
    --primary: 38 58% 57%;                /* #D1A150 */
    --primary-foreground: 0 0% 100%;      /* white text on gold */

    /* Secondary — very light grey chips + strong dark text */
    --secondary: 220 14% 96%;             /* #F4F4F5 */
    --secondary-foreground: 224 14% 7%;

    /* Muted — placeholder + secondary copy */
    --muted: 220 14% 96%;                 /* #F4F4F5 */
    --muted-foreground: 220 5% 42%;       /* #6B6B72 medium grey */

    /* Accent — hover + subtle highlight */
    --accent: 32 47% 96%;                 /* #F9F1E6 warm cream */
    --accent-foreground: 32 47% 25%;

    /* Destructive — red for danger CTAs */
    --destructive: 0 60% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Borders + inputs */
    --border: 220 13% 91%;                /* rgba equiv of #E5E7EB */
    --input: 220 13% 91%;
    --ring: 32 47% 47%;                   /* amber focus glow */

    /* Corner radius base — shadcn convention */
    --radius: 0.75rem;

    /* Sidebar palette (kept dark for the charcoal rail in the design) */
    --sidebar-background: 224 13% 7%;     /* #0E0F12 near-black */
    --sidebar-foreground: 220 9% 92%;
    --sidebar-primary: 32 47% 47%;
    --sidebar-primary-foreground: 33 60% 8%;
    --sidebar-accent: 224 12% 14%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 220 4% 20%;
    --sidebar-ring: 32 47% 47%;
  }

  /* We keep the light variables active for both stored themes; the
     reference design is light-only. If the dark palette is ever
     re-enabled it should be added under `.dark { ... }` here. */
  html[data-theme="dark"] { color-scheme: light; }
}

@layer base {
  * { border-color: hsl(var(--border)); }
  body {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Albert Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Platypi', ui-serif, Georgia, Cambria, serif;
    letter-spacing: -0.01em;
    color: hsl(var(--foreground));
    font-weight: 500;
  }
}