/* =========================================================================
   TIMBER TRAILS — DESIGN TOKENS
   Single source of truth for colour, type, spacing, motion and elevation.
   Every other stylesheet consumes these custom properties only — no hex
   values or magic numbers should appear outside this file.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     COLOUR — Brand palette
     Derived from the forest floor upward: charcoal soil, deep forest
     canopy, moss understorey, sage light and warm clay earth.
     ----------------------------------------------------------------------- */
  --color-forest: #1E4D3A;
  --color-forest-rgb: 30, 77, 58;
  --color-moss: #567D46;
  --color-moss-rgb: 86, 125, 70;
  --color-sage: #8FAE8B;
  --color-sage-rgb: 143, 174, 139;
  --color-earth: #CDB89D;
  --color-earth-rgb: 205, 184, 157;
  --color-warm-white: #F8F8F5;
  --color-warm-white-rgb: 248, 248, 245;
  --color-charcoal: #2C2C2C;
  --color-charcoal-rgb: 44, 44, 44;

  /* Extended tonal ramps (generated from the six brand colours, used for
     borders, hovers, disabled states and depth without inventing new hues) */
  --color-forest-10: rgba(var(--color-forest-rgb), 0.1);
  --color-forest-20: rgba(var(--color-forest-rgb), 0.2);
  --color-forest-60: rgba(var(--color-forest-rgb), 0.6);
  --color-moss-15: rgba(var(--color-moss-rgb), 0.15);
  --color-sage-20: rgba(var(--color-sage-rgb), 0.2);
  --color-earth-30: rgba(var(--color-earth-rgb), 0.3);
  --color-charcoal-70: rgba(var(--color-charcoal-rgb), 0.7);

  /* -----------------------------------------------------------------------
     COLOUR — Semantic roles (Light theme, default)
     ----------------------------------------------------------------------- */
  --surface-primary: var(--color-warm-white);
  --surface-secondary: #EFEFE9;
  --surface-elevated: #FFFFFF;
  --surface-inverse: var(--color-forest);
  --surface-glass: rgba(255, 255, 255, 0.6);
  --surface-glass-border: rgba(255, 255, 255, 0.35);

  --text-primary: var(--color-charcoal);
  --text-secondary: #55564F;
  --text-muted: #83847C;
  --text-inverse: var(--color-warm-white);
  --text-accent: var(--color-forest);

  --border-subtle: rgba(44, 44, 44, 0.09);
  --border-default: rgba(44, 44, 44, 0.14);
  --border-strong: rgba(44, 44, 44, 0.24);

  --brand-primary: var(--color-forest);
  --brand-secondary: var(--color-moss);
  --brand-accent: var(--color-earth);
  --focus-ring: #2E6B4F;

  --shadow-color: 30, 40, 35;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.06), 0 1px 1px rgba(var(--shadow-color), 0.04);
  --shadow-md: 0 6px 20px rgba(var(--shadow-color), 0.08), 0 2px 6px rgba(var(--shadow-color), 0.05);
  --shadow-lg: 0 20px 48px rgba(var(--shadow-color), 0.12), 0 6px 16px rgba(var(--shadow-color), 0.06);
  --shadow-xl: 0 32px 80px rgba(var(--shadow-color), 0.16), 0 10px 24px rgba(var(--shadow-color), 0.08);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Fluid type scale — clamps between mobile and ultra-wide viewports */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-lg: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
  --fs-xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 2.1rem + 2.9vw, 4.5rem);
  --fs-4xl: clamp(3.25rem, 2.3rem + 4.4vw, 6rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --lh-loose: 1.85;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.12em;
  --ls-widest: 0.24em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* -----------------------------------------------------------------------
     SPACING — 8px baseline grid, fluid where it aids editorial breathing room
     ----------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: clamp(3rem, 2.5rem + 2vw, 5rem);
  --space-2xl: clamp(4.5rem, 3.5rem + 4vw, 8rem);
  --space-3xl: clamp(6rem, 4.5rem + 6vw, 11rem);

  --content-max: 1320px;
  --content-narrow: 760px;
  --content-medium: 980px;

  /* -----------------------------------------------------------------------
     RADIUS, BORDERS, LAYERING
     ----------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --dur-slower: 1100ms;

  /* -----------------------------------------------------------------------
     GRADIENTS — organic, never decorative-for-its-own-sake
     ----------------------------------------------------------------------- */
  --gradient-canopy: linear-gradient(160deg, #12332A 0%, #1E4D3A 42%, #365E42 78%, #567D46 100%);
  --gradient-mist: radial-gradient(120% 120% at 20% 0%, rgba(143, 174, 139, 0.35) 0%, rgba(248, 248, 245, 0) 60%);
  --gradient-earth-glow: radial-gradient(100% 100% at 80% 100%, rgba(205, 184, 157, 0.4) 0%, rgba(248, 248, 245, 0) 55%);

  color-scheme: light;
}

/* ===========================================================================
   DARK THEME — applied via [data-theme="dark"] on <html>, set by theme.js
   from localStorage or the system prefers-color-scheme media query.
   =========================================================================== */
[data-theme='dark'] {
  --surface-primary: #14201B;
  --surface-secondary: #1A2820;
  --surface-elevated: #1E2E25;
  --surface-inverse: var(--color-warm-white);
  --surface-glass: rgba(30, 46, 37, 0.55);
  --surface-glass-border: rgba(143, 174, 139, 0.14);

  --text-primary: #EFEFE7;
  --text-secondary: #C3C9BE;
  --text-muted: #8B9488;
  --text-inverse: var(--color-charcoal);
  --text-accent: #A8CBA0;

  --border-subtle: rgba(239, 239, 231, 0.08);
  --border-default: rgba(239, 239, 231, 0.13);
  --border-strong: rgba(239, 239, 231, 0.22);

  --brand-primary: #6FA37F;
  --brand-secondary: var(--color-sage);
  --brand-accent: var(--color-earth);
  --focus-ring: #A8CBA0;

  --shadow-color: 3, 8, 5;

  --gradient-canopy: linear-gradient(160deg, #0A140F 0%, #12271D 42%, #1E3928 78%, #2E4E36 100%);
  --gradient-mist: radial-gradient(120% 120% at 20% 0%, rgba(86, 125, 70, 0.28) 0%, rgba(20, 32, 27, 0) 60%);
  --gradient-earth-glow: radial-gradient(100% 100% at 80% 100%, rgba(205, 184, 157, 0.12) 0%, rgba(20, 32, 27, 0) 55%);

  color-scheme: dark;
}

/* Smooth, deliberate cross-fade whenever the theme changes.
   Disabled globally when the user prefers reduced motion (see animations.css). */
.theme-transition,
.theme-transition *{
  transition: background-color var(--dur-slow) var(--ease-soft),
              color var(--dur-slow) var(--ease-soft),
              border-color var(--dur-slow) var(--ease-soft),
              box-shadow var(--dur-slow) var(--ease-soft);
}