/*
 * Honest & Homemade — Design Tokens
 * Art direction: warm home kitchen → editorial warmth, grounded calm
 * Palette: Lagoon & Rose (light) + Blue Lagoon & Crimson (dark)
 * Typography: Lora (display/serif) + General Sans (body/sans)
 *
 * Palette reference:
 *   Espresso       #0F0000
 *   Red Mahogany   #440000
 *   Crimson Tide   #6E1313
 *   Rose Quartz    #F4B3B3
 *   Blue Lagoon    #002028
 */

/* ============================================================
   FONT FALLBACKS
   ============================================================ */
@font-face {
  font-family: 'General Sans';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: normal;
  font-weight: 400 600;
  font-style: normal;
}

@font-face {
  font-family: 'Lora';
  src: local('Georgia');
  size-adjust: 97%;
  ascent-override: normal;
  descent-override: normal;
  font-weight: 400 700;
  font-style: normal;
}

/* ============================================================
   LIGHT MODE — Scheme 6: Lagoon & Rose
   Pale aqua base, deep lagoon nav, crimson accents, rose quartz chips
   ============================================================ */
:root,
[data-theme="light"] {

  /* --- Surfaces --- */
  --color-bg:               #F4FAFB;
  --color-surface:          #FFFFFF;
  --color-surface-2:        #F9FDFD;
  --color-surface-offset:   #EEF7F9;
  --color-surface-offset-2: #E4F2F5;
  --color-surface-dynamic:  #D8ECF0;
  --color-divider:          #C8DDE2;
  --color-border:           #B8D2D8;

  /* --- Text --- */
  --color-text:             #0D2830;
  --color-text-muted:       #527A84;
  --color-text-faint:       #8AAEB6;
  --color-text-inverse:     #FFFFFF;

  /* --- Heading colour (lagoon — scheme 6: --heading: #002028) --- */
  --color-heading:          #002028;

  /* --- Primary: Blue Lagoon ---
     Nav background, buttons, links — deep lagoon passes 4.5:1 against white
  --- */
  --color-primary:          #005068;
  --color-primary-btn:      #002028;
  --color-primary-hover:    #003040;
  --color-primary-active:   #001820;
  --color-primary-highlight:#C8DDE2;

  /* --- Accent: Crimson Tide (scheme 6: --accent: #6E1313) ---
     Used for wordmark H, inline highlights, hover states
  --- */
  --color-accent:           #6E1313;
  --color-accent-hover:     #881A1A;
  --color-accent-active:    #440000;
  --color-accent-highlight: #FDE8E8;
  --color-accent-text:      #002028;

  /* --- Chips / Tags: Rose Quartz bg + lagoon text (scheme 6) --- */
  --color-chip-bg:          #F4B3B3;
  --color-chip-text:        #002028;

  /* --- Semantic --- */
  --color-success:          #2E7A4A;
  --color-success-highlight:#D0EAD8;
  --color-warning:          #B86A10;
  --color-warning-highlight:#F5E0C0;
  --color-error:            #6E1313;
  --color-error-highlight:  #FDE8E8;
  --color-info:             #002028;
  --color-info-highlight:   #C8DDE2;

  /* --- Difficulty badge colours --- */
  --color-easy:             #2E7A4A;
  --color-easy-bg:          #D0EAD8;
  --color-medium:           #B86A10;
  --color-medium-bg:        #F5E0C0;
  --color-advanced:         #6E1313;
  --color-advanced-bg:      #FDE8E8;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px  oklch(0.18 0.04 210 / 0.07);
  --shadow-md:  0 4px 12px oklch(0.18 0.04 210 / 0.10);
  --shadow-lg:  0 12px 32px oklch(0.18 0.04 210 / 0.14);
  --shadow-xl:  0 24px 56px oklch(0.18 0.04 210 / 0.18);

  /* --- Border radius --- */
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast:        120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Content widths --- */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --content-recipe:  1100px;
  --content-full:    100%;

  /* --- Font families --- */
  --font-display: 'Lora', 'Georgia', serif;
  --font-body:    'General Sans', 'Inter', 'Helvetica Neue', sans-serif;

  /* --- Z-index layers --- */
  --z-base:      1;
  --z-sticky:    100;
  --z-drawer:    200;
  --z-overlay:   300;
  --z-lightbox:  400;
  --z-toast:     500;
}

/* ============================================================
   DARK MODE — Scheme 3: Blue Lagoon & Crimson
   Deep teal base, rose quartz headings, crimson chips
   ============================================================ */
[data-theme="dark"] {

  /* --- Surfaces --- */
  --color-bg:               #002028;
  --color-surface:          #00303C;
  --color-surface-2:        #003848;
  --color-surface-offset:   #003040;
  --color-surface-offset-2: #004050;
  --color-surface-dynamic:  #004A5C;
  --color-divider:          #005068;  /* was #004050 — separated from surface-offset-2 for visible lines */
  --color-border:           #005068;

  /* --- Text --- */
  --color-text:             #C8DDE2;
  --color-text-muted:       #6A9BA8;
  --color-text-faint:       #3A6878;
  --color-text-inverse:     #002028;

  /* --- Heading colour (rose quartz — scheme 3: --heading: #F4B3B3) --- */
  --color-heading:          #F4B3B3;

  /* --- Primary: Rose Quartz as primary in dark ---
     Used for headings, links, wordmark H
  --- */
  --color-primary:          #F4B3B3;
  --color-primary-btn:      #6E1313;
  --color-primary-hover:    #881A1A;
  --color-primary-active:   #440000;
  --color-primary-highlight:#3A0808;

  /* --- Accent: Rose Quartz softer --- */
  --color-accent:           #F4B3B3;
  --color-accent-hover:     #EE9090;
  --color-accent-active:    #F4B3B3;
  --color-accent-highlight: #3A0808;
  --color-accent-text:      #0F0000;

  /* --- Chips / Tags: Crimson bg + rose quartz text (scheme 3) --- */
  --color-chip-bg:          #6E1313;
  --color-chip-text:        #F4B3B3;

  /* --- Semantic --- */
  --color-success:          #5AAA7A;
  --color-success-highlight:#0A2818;
  --color-warning:          #DDA040;
  --color-warning-highlight:#2A1A08;
  --color-error:            #F4B3B3;
  --color-error-highlight:  #3A0808;
  --color-info:             #6AC8D8;
  --color-info-highlight:   #002830;

  /* --- Difficulty badge colours --- */
  --color-easy:             #5AAA7A;
  --color-easy-bg:          #0A2818;
  --color-medium:           #DDA040;
  --color-medium-bg:        #2A1A08;
  --color-advanced:         #F4B3B3;
  --color-advanced-bg:      #3A0808;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px  oklch(0 0 0 / 0.25);
  --shadow-md:  0 4px 12px oklch(0 0 0 / 0.38);
  --shadow-lg:  0 12px 32px oklch(0 0 0 / 0.50);
  --shadow-xl:  0 24px 56px oklch(0 0 0 / 0.60);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:               #002028;
    --color-surface:          #00303C;
    --color-surface-2:        #003848;
    --color-surface-offset:   #003040;
    --color-surface-offset-2: #004050;
    --color-surface-dynamic:  #004A5C;
    --color-divider:          #005068;  /* was #004050 — separated from surface-offset-2 */
    --color-border:           #005068;
    --color-text:             #C8DDE2;
    --color-text-muted:       #6A9BA8;
    --color-text-faint:       #3A6878;
    --color-text-inverse:     #002028;
    --color-heading:          #F4B3B3;
    --color-primary:          #F4B3B3;
    --color-primary-btn:      #6E1313;
    --color-primary-hover:    #881A1A;
    --color-primary-active:   #440000;
    --color-primary-highlight:#3A0808;
    --color-accent:           #F4B3B3;
    --color-accent-hover:     #EE9090;
    --color-accent-active:    #F4B3B3;
    --color-accent-highlight: #3A0808;
    --color-accent-text:      #0F0000;
    --color-chip-bg:          #6E1313;
    --color-chip-text:        #F4B3B3;
    --color-success:          #5AAA7A;
    --color-success-highlight:#0A2818;
    --color-warning:          #DDA040;
    --color-warning-highlight:#2A1A08;
    --color-error:            #F4B3B3;
    --color-error-highlight:  #3A0808;
    --color-info:             #6AC8D8;
    --color-info-highlight:   #002830;
    --color-easy:             #5AAA7A;
    --color-easy-bg:          #0A2818;
    --color-medium:           #DDA040;
    --color-medium-bg:        #2A1A08;
    --color-advanced:         #F4B3B3;
    --color-advanced-bg:      #3A0808;
    --shadow-sm:  0 1px 2px  oklch(0 0 0 / 0.25);
    --shadow-md:  0 4px 12px oklch(0 0 0 / 0.38);
    --shadow-lg:  0 12px 32px oklch(0 0 0 / 0.50);
    --shadow-xl:  0 24px 56px oklch(0 0 0 / 0.60);
  }
}

/* ============================================================
   SPACING SYSTEM (4px base)
   ============================================================ */
:root {
  --space-px:  1px;
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-9:   2.25rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
}

/* ============================================================
   FLUID TYPE SCALE
   ============================================================ */
:root {
  --text-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base: clamp(1rem,     0.96rem + 0.20vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem   + 0.63vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.4rem + 2.00vw, 3rem);
  --text-3xl:  clamp(2.5rem,   1.5rem + 3.00vw, 4rem);
}

/* ============================================================
   LINE HEIGHTS
   ============================================================ */
:root {
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.60;
  --leading-relaxed:1.75;
}

/* ============================================================
   LETTER SPACING
   ============================================================ */
:root {
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.12em;
}