/*
 * Nanna Bayer — Design Tokens
 *
 * Light-first design. Bright ceramic palette.
 * Oranges, pinks, eucalyptus blues — Nanna loves colour.
 * Dark #1A2E2A text on bright grounds. No brown/grey/black.
 *
 * Accessibility: All foreground/background pairings meet WCAG 2.1 AA
 * contrast ratios (4.5:1 for normal text, 3:1 for large text).
 */

:root {
  /* -- Primary Palette -- */
  --color-primary: #A63D20;         /* Terracotta — 6.38:1 on light grounds */
  --color-primary-hover: #C75B3A;   /* Warm terracotta — hover states */
  --color-primary-dark: #7D2E15;    /* Deep terracotta — active states */
  --color-primary-light: #FDF0EC;   /* Pale terracotta tint — subtle backgrounds */

  /* -- Secondary -- */
  --color-secondary: #1B6B65;       /* Eucalyptus teal */
  --color-secondary-light: #E8F5F3; /* Pale teal tint */

  /* -- Accent -- */
  --color-accent: #D4532B;          /* Bright terracotta — fired clay */
  --color-accent-light: #FEE8DF;    /* Pale accent tint */

  /* -- Surfaces (porcelain / light-first) -- */
  --color-background: #FDF6F0;      /* Warm porcelain */
  --color-surface: #F5EDE3;         /* Warm porcelain — homepage ground */
  --color-surface-raised: #FDF6F0;  /* Porcelain — cards / modals */
  --color-porcelain: #FDF6F0;       /* Canonical porcelain anchor */

  /* -- Neutrals -- */
  --color-text: #1A2E2A;            /* Deep eucalyptus ink — 12.9:1 on porcelain */
  --color-text-secondary: #3D5A52;  /* Ink secondary */
  --color-text-light: #5A7A72;      /* Muted ink */
  --color-border: #D8CFC5;          /* Warm light border */

  /* -- Semantic -- */
  --color-heading: var(--color-primary);
  --color-ink-primary: #1A2E2A;
  --color-ink-secondary: #3D5A52;
  --color-link: var(--color-primary);

  /* -- Shadows -- */
  --shadow-sm: 0 1px 2px rgba(26, 46, 42, 0.06);
  --shadow-md: 0 4px 6px rgba(26, 46, 42, 0.08);
  --shadow-lg: 0 10px 15px rgba(26, 46, 42, 0.10);

  /* -- Typography -- */
  --font-heading: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
  --font-display: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-label: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Fluid Typography (18px minimum base — vision-loss accommodation) */
  --text-xs: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-sm: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --text-base: clamp(1.125rem, 1rem + 0.25vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem);
  --text-3xl: clamp(2.2rem, 1.8rem + 2vw, 3.5rem);
  --text-4xl: clamp(2.8rem, 2.2rem + 2.5vw, 4.5rem);

  /* Design system type scale */
  --text-label-sm: 0.6875rem;    /* 11px — Manrope uppercase tracked */
  --text-label-md: 0.8125rem;    /* 13px — Manrope uppercase tracked */
  --text-label-lg: 0.875rem;     /* 14px — Manrope uppercase tracked */
  --text-body-sm: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-body-lg: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);
  --text-h3: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem);
  --text-h2: clamp(2.25rem, 1.8rem + 1vw, 3rem);
  --text-h1: clamp(2.5rem, 2rem + 1.5vw, 4rem);
  --text-display: clamp(3.5rem, 2.5rem + 2.5vw, 6rem);
  --text-display-xl: clamp(4.5rem, 3rem + 3vw, 7rem);

  --line-height-tight: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.7;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Letter tracking */
  --track-display: 0.2em;
  --track-section: 0.3em;
  --track-nav: 0.15em;
  --track-tight: -0.01em;

  /* -- Spacing -- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-3xl: clamp(3rem, 2rem + 4vw, 6rem);
  --space-4xl: clamp(4rem, 3rem + 6vw, 10rem);

  /* Numeric spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* -- Layout -- */
  --max-width-prose: 45ch;
  --max-width-wide: 75rem;
  --max-width-page: 85rem;
  --measure-prose: 65ch;
  --measure-narrow: 45ch;
  --max-page: 85rem;

  /* -- Z-Index -- */
  --z-below: -1;
  --z-base: 0;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* -- Borders & Radius -- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --radius-sharp: 0;
  --radius-fine: 2px;
  --radius-soft: 4px;
  --radius-pill: 9999px;

  --border-thin: 1px solid var(--color-border);
  --border-hairline: 0.5px solid var(--color-border);
  --border-line: 1px solid var(--color-border);

  /* -- Transitions -- */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 700ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 200ms;
  --t-normal: 300ms;
  --t-slow: 700ms;

  color-scheme: light;
}

/* ── 6-Palette Nerikomi System ── */
:root {
  /* Page background grounds — 15–20% saturation */
  --color-page-exhibitions: #F5E0E5;    /* Blush porcelain */
  --color-page-classes: #F5EBD0;        /* Saffron clay */
  --color-page-studio: #EDE0D0;         /* Warm clay */
  --color-page-contact: #F5E5D5;        /* Warm cream/linen */
  --color-page-homepage: #F5EDE3;       /* Warm porcelain */
  --color-page-work: #1A2E2A;           /* Deep eucalyptus */

  /* Extended surface tokens */
  --color-porcelain-muted: #C8D8CC;
  --color-porcelain-soft: #F5E5DC;
  --color-surface-porcelain: #FDF6F0;
  --color-surface-porcelain-warm: #F0E8DF;
  --color-surface-porcelain-raised: #EDE0D4;
  --color-hero-shadow: #3E1520;
  --color-kiln-dark: #120E0B;
  --color-kiln-warm: #A93F17;

  /* Label colours — accessible on light grounds */
  --color-label-exhibitions: #7D3B4A;
  --color-label-exhibitions-light: #D88090;
  --color-label-exhibitions-accessible: var(--color-label-exhibitions-light);
  --color-label-classes: #9A7010;
  --color-label-eucalyptus: #1B6B65;
  --color-label-eucalyptus-light: #35B5A5;
  --color-label-eucalyptus-accessible: var(--color-label-eucalyptus-light);
  --color-label-terracotta: #A63D20;
  --color-label-terracotta-light: #DA7A56;
  --color-label-terracotta-accessible: var(--color-label-terracotta-light);
}

/* ── Design System Aliases ── */
:root {
  --color-eucalyptus-deep: var(--color-page-work);
  --color-porcelain-warm: var(--color-page-homepage);
  --color-clay-warm: var(--color-page-studio);
  --color-saffron-clay: var(--color-page-classes);
  --color-linen: var(--color-page-contact);
  --color-blush-porcelain: var(--color-page-exhibitions);
  --color-pale-sage: #C8D8CC;
  --color-terracotta-bright: #D4532B;
  --color-blush-deep: var(--color-hero-shadow);

  /* Hero gradients */
  --gradient-nerikomi: linear-gradient(135deg,
    rgba(166, 61, 32, 1) 0%,
    rgba(166, 61, 32, 0.95) 25%,
    rgba(212, 83, 43, 0.7) 45%,
    rgba(166, 61, 32, 0.85) 60%,
    rgba(27, 107, 101, 0.4) 80%,
    rgba(166, 61, 32, 1) 100%);
  --gradient-blush:    linear-gradient(150deg, #7D3B4A 0%, #3E1520 100%);
  --gradient-studio:   linear-gradient(135deg, #7D3B4A 0%, #A93F17 100%);
  --gradient-atmos:    linear-gradient(135deg, #1B6B65 0%, #1A2E2A 100%);

  /* Semantic surface tokens — default HOME (warm porcelain). Override with [data-page]. */
  --surface:                    var(--color-porcelain-warm);
  --surface-container:          var(--color-surface-raised);
  --surface-design-raised:      var(--color-surface-raised);
  --surface-container-low-ds:   #1A2E2A;   /* eucalyptus — work page / footer */
  --fg:                         var(--color-ink-primary);
  --fg-muted:                   rgba(26, 46, 42, 0.72);
  --fg-secondary:               var(--color-ink-secondary);
  --accent:                     var(--color-label-terracotta);
  --link-ds:                    var(--color-link);
  --rule:                       rgba(166, 61, 32, 0.40);
}

/* Per-page world overrides — applied to <html data-page="…"> */
[data-page="home"]        { --surface: #F5EDE3; --accent: var(--color-label-terracotta); }
[data-page="studio"]      { --surface: #EDE0D0; --accent: var(--color-label-terracotta); }
[data-page="classes"]     { --surface: #F5EBD0; --accent: var(--color-label-classes); }
[data-page="contact"]     { --surface: #F5E5D5; --accent: var(--color-label-terracotta); }
[data-page="exhibitions"] { --surface: #F5E0E5; --accent: var(--color-label-terracotta); }
[data-page="work"] {
  --surface: var(--color-eucalyptus-deep);
  --fg: var(--color-surface-raised);
  --fg-muted: rgba(253, 246, 240, 0.85);
  --fg-secondary: var(--color-pale-sage);
  --accent: var(--color-label-terracotta-light);
}

/* -- Dark mode override (opt-in via data-theme="dark") -- */
[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #1E1D1B;
  --color-surface: #2A2825;
  --color-surface-raised: #343130;

  --color-text: #E2DDD8;
  --color-text-secondary: #A09A94;
  --color-text-light: #908A84;
  --color-border: #3D3836;

  --color-heading: #F0C4B0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}