@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   1. DESIGN TOKENS — Editorial Coastal-Colonial Studio (@smithstreetdesign)
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light;

    /* Tier 1: Literal Palette — Alabaster, Linen, Espresso, Coastal Slate & Aged Brass */
    --color-alabaster: #FAF8F5;
    --color-ivory: #F3EFEA;
    --color-parchment: #EAE3DA;
    --color-putty: #D8D1CA; /* Nicole's signature Canva cartouche & closing plaque taupe */
    --color-putty-soft: #EDE9E4;
    --color-taupe-rule: #9B9590; /* Canva decorative perimeter hairline */
    --color-paper: #FFFFFF;

    --color-espresso: #1E1C1A;
    --color-charcoal: #3B3733;
    --color-driftwood: #59524B;
    --color-warm-stone: #CFC6BA;

    --color-slate: #354950;
    --color-slate-deep: #25353B;
    --color-sage: #58695E;
    --color-brass: #7F5F34;
    --color-brass-muted: #B89A70;

    --color-terracotta: #9E3B28;
    --color-terracotta-tint: #FDF2F0;
    --color-moss: #2D6343;
    --color-moss-tint: #F2F8F4;

    /* Tier 2: Semantic Surface, Ink & Accent Tokens (WCAG AA >= 4.5:1 text, >= 3:1 UI) */
    --surface-canvas: var(--color-alabaster);
    --surface-subtle: var(--color-ivory);
    --surface-muted: var(--color-parchment);
    --surface-putty: var(--color-putty);
    --surface-putty-soft: var(--color-putty-soft);
    --surface-elevated: var(--color-paper);
    --surface-inverse: var(--color-espresso);

    --ink-primary: var(--color-espresso);
    --ink-secondary: var(--color-charcoal);
    --ink-muted: var(--color-driftwood);
    --ink-on-dark: var(--color-alabaster);
    --ink-on-dark-muted: #CFC8BE;

    --accent-primary: var(--color-slate);
    --accent-primary-hover: var(--color-slate-deep);
    --accent-editorial: var(--color-brass);
    --accent-rule: var(--color-brass-muted);

    /* Tier 3: Borders, Focus & Elevation */
    --border-hairline: #E2DAD0;
    --border-subtle: #D2C9BD;
    --border-control: #766E65; /* >= 4.3:1 on alabaster & white for WCAG 1.4.11 non-text contrast */
    --border-on-dark-control: #7D766E; /* >= 3.68:1 on espresso (#1E1C1A) for dark-surface controls */
    --focus-ring: var(--color-slate);

    --shadow-sm:
      0 1px 2px rgb(30 28 26 / 0.04),
      0 4px 12px rgb(30 28 26 / 0.04);
    --shadow-md:
      0 2px 6px rgb(30 28 26 / 0.05),
      0 14px 32px rgb(30 28 26 / 0.07);
    --shadow-dialog:
      0 8px 24px rgb(20 18 16 / 0.14),
      0 32px 72px rgb(20 18 16 / 0.24);

    /* Typography — Editorial Serif + Modern Geometric Sans (rem + vw clamp, max <= 2.5x min) */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-serif: var(--font-display);
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-error: var(--color-terracotta);

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --text-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
    --text-xl: clamp(1.45rem, 1.28rem + 0.75vw, 1.95rem);
    --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
    --text-hero: clamp(2.35rem, 1.75rem + 2.75vw, 4.15rem);

    --leading-tight: 1.1;
    --leading-heading: 1.18;
    --leading-snug: 1.38;
    --leading-body: 1.65;

    /* Layout & Rhythm */
    --container-max: 78rem;
    --container-gutter: clamp(1.25rem, 4vw, 3rem);
    --header-height: 4.75rem;
    --space-section: clamp(4.25rem, 3.25rem + 4.5vw, 7.25rem);

    /* Architectural Radii */
    --radius-xs: 0.1875rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-pill: 999rem;

    /* Motion */
    --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 180ms;
    --duration-base: 280ms;
    --duration-slow: 480ms;
  }

  @media (prefers-contrast: more) {
    :root {
      --ink-secondary: var(--color-espresso);
      --ink-muted: #3B3733;
      --border-hairline: #766E65;
      --border-subtle: #59524B;
      --border-control: var(--color-espresso);
      --border-on-dark-control: var(--color-alabaster);
    }
  }

  @media (forced-colors: active) {
    :root {
      --surface-canvas: Canvas;
      --surface-subtle: Canvas;
      --surface-muted: Canvas;
      --surface-putty: Canvas;
      --surface-putty-soft: Canvas;
      --surface-elevated: Canvas;
      --surface-inverse: Canvas;
      --ink-primary: CanvasText;
      --ink-secondary: CanvasText;
      --ink-muted: CanvasText;
      --ink-on-dark: CanvasText;
      --ink-on-dark-muted: GrayText;
      --accent-primary: Highlight;
      --accent-editorial: LinkText;
      --border-hairline: GrayText;
      --border-subtle: CanvasText;
      --border-control: ButtonText;
      --border-on-dark-control: ButtonText;
      --focus-ring: Highlight;
    }
  }
}

/* ==========================================================================
   2. ELEMENT RESET (Targeted :where() — avoids global * selector pitfalls)
   ========================================================================== */
@layer reset {
  :where(
    html, body, div, span, header, nav, main, section, article, aside, footer,
    figure, figcaption, blockquote, h1, h2, h3, h4, h5, h6, p, ul, ol, li,
    dl, dt, dd, form, fieldset, legend, label, input, select, textarea,
    button, a, img, svg, dialog
  ) {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  :where(img, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
}

/* ==========================================================================
   3. DOCUMENT BASE, FOCUS, VIEW TRANSITIONS & UTILITIES
   ========================================================================== */
@layer base {
  html {
    font-size: 100%;
    scroll-padding-block-start: calc(var(--header-height) + 1.5rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  /* Scope View Transitions to named gallery groups so header & controls never freeze */
  :root {
    view-transition-name: none;
  }

  ::view-transition {
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  body {
    min-block-size: 100dvh;
    background-color: var(--surface-canvas);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    text-align: start;
    overflow-wrap: break-word;
    accent-color: var(--accent-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background-color: color-mix(in oklab, var(--accent-primary) 20%, var(--surface-muted));
    color: var(--ink-primary);
  }

  :where(h1, h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--leading-heading);
    color: var(--ink-primary);
    text-wrap: balance;
  }

  :where(p, blockquote, li, figcaption) {
    text-wrap: pretty;
  }

  :where(a:any-link) {
    color: inherit;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
  }

  /* High-contrast accessible focus ring (>= 3:1 against light & dark surfaces) */
  :where(a:any-link, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  /* Prevent background page scroll chaining when any modal <dialog> is open */
  dialog:modal {
    overscroll-behavior: contain;
  }

  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
  }
}

@layer utilities {
  [hidden] {
    display: none !important;
  }

  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
}