/**
 * Age of Dinosaurs — Design Tokens
 *
 * Centralized design token architecture establishing the visual DNA of the
 * museum field journal aesthetic. All component and block styles must consume
 * these tokens rather than introducing arbitrary values.
 *
 * @package AgeOfDinosaurs
 */

:root {
	/* ==========================================================================
	   1. Brand Color Palette (PRD Approved)
	   Strictly forbidden: Pure Black (#000000), Dark Navy, Dark Blue, Crimson.
	   ========================================================================== */
	--color-bone: #F6F0E3;       /* Warm background, museum parchment texture */
	--color-sand: #EADFC8;       /* Secondary container background, cards, borders */
	--color-chalk: #FFFAF0;      /* Highlight surfaces, clean card interiors */
	--color-fern: #3F7D4E;       /* Natural vibrant green, primary brand accent */
	--color-deep-fern: #1F4A32;  /* Dark forest green for footer & deep contrast surfaces */
	--color-moss: #8DA85A;       /* Soft vegetative green, secondary chips & badges */
	--color-amber: #E89B1C;      /* Warm prehistoric resin, primary action background */
	--color-clay: #C65D3A;       /* Terracotta earth, carnivore accent, error/caution */
	--color-lagoon: #4FA6A0;     /* Prehistoric shallow sea teal, marine elements & info */
	--color-espresso: #2E2A22;   /* Deep organic charcoal brown; MANDATORY primary text color */
	--color-stone: #6F6858;      /* Muted earth grey-brown, secondary text & labels */
	--color-dune: #D8CCB2;       /* Warm subtle border, dividers, input borders */

	/* ==========================================================================
	   2. Period Taxonomy Colors
	   ========================================================================== */
	--color-period-triassic: #D9894B;    /* Desert sandstone orange */
	--color-period-jurassic: #3F7D4E;    /* Lush Jurassic fern green */
	--color-period-cretaceous: #4FA6A0;  /* Prehistoric chalk sea lagoon teal */

	/* ==========================================================================
	   3. Diet Taxonomy Colors
	   ========================================================================== */
	--color-diet-carnivore: #C65D3A;     /* Clay terracotta */
	--color-diet-herbivore: #6E9B3F;     /* Lush foliage green */
	--color-diet-omnivore: #E0A21F;      /* Warm amber gold */

	/* ==========================================================================
	   4. Semantic Color System
	   ========================================================================== */
	--color-bg-primary: var(--color-bone);
	--color-bg-secondary: var(--color-sand);
	--color-bg-surface: var(--color-chalk);
	--color-bg-muted: var(--color-sand);
	--color-bg-dark: var(--color-deep-fern);

	--color-text-primary: var(--color-espresso);
	--color-text-secondary: var(--color-stone);
	--color-text-muted: var(--color-stone);
	--color-text-inverse: var(--color-chalk);

	--color-border-default: var(--color-dune);
	--color-border-strong: var(--color-stone);

	--color-action-primary: var(--color-amber);
	--color-action-primary-text: var(--color-espresso);
	--color-action-primary-hover: #D68C14;

	--color-action-secondary: transparent;
	--color-action-secondary-border: var(--color-fern);
	--color-action-secondary-text: var(--color-fern);
	--color-action-secondary-hover: rgba(63, 125, 78, 0.08);

	--color-focus-ring: var(--color-fern);

	--color-success: var(--color-fern);
	--color-warning: var(--color-amber);
	--color-error: var(--color-clay);
	--color-info: var(--color-lagoon);

	/* ==========================================================================
	   5. Typography Families & Weights
	   ========================================================================== */
	--font-family-heading: "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
	--font-family-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-family-data: "DM Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* ==========================================================================
	   6. Responsive Type Scale (clamp-based fluidity)
	   Desktop: H1 56px, H2 40px, H3 28px, H4 20px, Body 18px, Small 14px, Quick-fact 13px
	   Mobile:  H1 36px, H2 28px, H3 22px, H4 18px, Body 17px, Small 14px, Quick-fact 12px
	   ========================================================================== */
	--font-size-h1: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);           /* 36px - 56px */
	--font-size-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);        /* 28px - 40px */
	--font-size-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);      /* 22px - 28px */
	--font-size-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);      /* 18px - 20px */
	--font-size-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); /* 17px - 18px */
	--font-size-small: 0.875rem;                                    /* 14px */
	--font-size-quick-fact: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12px - 13px */

	/* ==========================================================================
	   7. Line Heights
	   ========================================================================== */
	--line-height-display: 1.1;   /* 1.05–1.15 display headings */
	--line-height-heading: 1.2;   /* 1.15–1.25 standard headings */
	--line-height-body: 1.65;     /* 1.55–1.7 body readability */
	--line-height-ui: 1.4;        /* 1.3–1.5 navigation and buttons */

	/* ==========================================================================
	   8. Letter Spacing (Restrained)
	   ========================================================================== */
	--letter-spacing-tight: -0.015em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.04em;
	--letter-spacing-wider: 0.06em;

	/* ==========================================================================
	   9. Spacing System
	   ========================================================================== */
	--space-xs: 0.25rem;   /* 4px */
	--space-sm: 0.5rem;    /* 8px */
	--space-md: 0.75rem;   /* 12px */
	--space-lg: 1rem;      /* 16px */
	--space-xl: 1.5rem;    /* 24px */
	--space-2xl: 2rem;     /* 32px */
	--space-3xl: 3rem;     /* 48px */
	--space-4xl: 4rem;     /* 64px */
	--space-5xl: 6rem;     /* 96px */

	/* ==========================================================================
	   10. Border Radius
	   ========================================================================== */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;     /* Buttons ~12px */
	--radius-xl: 16px;     /* Cards ~16px */
	--radius-pill: 9999px;

	/* ==========================================================================
	   11. Warm Shadow System (Espresso-derived, zero harsh black)
	   ========================================================================== */
	--shadow-sm: 0 1px 3px rgba(46, 42, 34, 0.07), 0 1px 2px rgba(46, 42, 34, 0.04);
	--shadow-md: 0 4px 8px -2px rgba(46, 42, 34, 0.08), 0 2px 4px -2px rgba(46, 42, 34, 0.04);
	--shadow-lg: 0 12px 24px -4px rgba(46, 42, 34, 0.10), 0 4px 8px -2px rgba(46, 42, 34, 0.05);

	/* ==========================================================================
	   12. Container & Layout Tokens
	   ========================================================================== */
	--layout-content-max: 1200px;
	--layout-reading-max: 720px;
	--layout-wide-max: 1360px;
	--layout-page-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	--layout-section-spacing: clamp(2.25rem, 3vw, 3.5rem);

	/* ==========================================================================
	   13. Button Foundation Tokens
	   ========================================================================== */
	--btn-height-min: 48px;
	--btn-padding-y: 0.75rem;
	--btn-padding-x: 1.5rem;
	--btn-radius: var(--radius-lg);
	--btn-font-family: var(--font-family-body);
	--btn-font-size: var(--font-size-body);
	--btn-font-weight: var(--font-weight-bold);
	--btn-line-height: var(--line-height-ui);

	--btn-primary-bg: var(--color-amber);
	--btn-primary-text: var(--color-espresso);
	--btn-primary-hover-bg: var(--color-action-primary-hover);
	--btn-primary-hover-text: var(--color-espresso);

	--btn-secondary-bg: transparent;
	--btn-secondary-border: var(--color-fern);
	--btn-secondary-text: var(--color-fern);
	--btn-secondary-hover-bg: var(--color-action-secondary-hover);
	--btn-secondary-hover-text: var(--color-deep-fern);

	--btn-focus-ring: var(--color-fern);
	--btn-disabled-bg: var(--color-dune);
	--btn-disabled-text: var(--color-stone);

	/* ==========================================================================
	   14. Form Foundation Tokens
	   ========================================================================== */
	--form-input-bg: var(--color-chalk);
	--form-input-border: var(--color-dune);
	--form-input-text: var(--color-espresso);
	--form-input-placeholder: var(--color-stone);
	--form-input-radius: var(--radius-md);
	--form-input-height: 48px;
	--form-input-padding: 0.75rem 1rem;
	--form-focus-ring: var(--color-fern);
	--form-focus-border: var(--color-fern);

	--form-disabled-bg: var(--color-sand);
	--form-disabled-border: var(--color-dune);
	--form-disabled-text: var(--color-stone);

	--form-error-border: var(--color-clay);
	--form-error-text: var(--color-clay);
	--form-success-border: var(--color-fern);

	/* ==========================================================================
	   15. Focus System Tokens (WCAG 2.2 AA Compliant)
	   ========================================================================== */
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
	--focus-ring-color: var(--color-fern);

	/* ==========================================================================
	   16. Motion Tokens
	   ========================================================================== */
	--motion-duration-fast: 150ms;
	--motion-duration-normal: 250ms;
	--motion-duration-slow: 400ms;
	--motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--motion-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
	/* ==========================================================================
	   18. Semantic Z-Index System (Centralized Layer Hierarchy)
	   ========================================================================== */
	--z-base: 1;
	--z-card: 10;
	--z-sticky: 100;
	--z-mobile-nav: 1100;
	--z-header: 1200;
	--z-dropdown: 1250;
	--z-overlay: 2000;
	--z-modal: 2050;
	--z-skip-link: 99999;

	/* ==========================================================================
	   19. Liquid-Glass & Navigation Tokens (3-state system)
	   State A (top): very transparent, blends into the hero.
	   State B (scrolled): stronger surface for readability.
	   State C (menu open): strongest surface behind the mobile sheet.
	   ========================================================================== */
	--nav-glass-bg: rgba(255, 250, 240, 0.68);
	--nav-glass-bg-scrolled: rgba(255, 250, 240, 0.92);
	--nav-glass-bg-open: rgba(255, 250, 240, 0.98);
	--nav-glass-border: rgba(216, 204, 178, 0.55);
	--nav-glass-border-scrolled: rgba(216, 204, 178, 0.8);
	--nav-glass-blur: 18px;
	--nav-glass-blur-scrolled: 24px;
	--nav-glass-saturate: 140%;
	--nav-glass-shadow: 0 8px 24px -4px rgba(46, 42, 34, 0.08), 0 2px 6px -2px rgba(46, 42, 34, 0.04);
	--nav-glass-shadow-scrolled: 0 12px 32px -4px rgba(46, 42, 34, 0.14), 0 4px 10px -2px rgba(46, 42, 34, 0.06);
	--nav-glass-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px 0 rgba(216, 204, 178, 0.25);
	--nav-max-width: 1140px;
	--nav-top-offset: 14px;
	--nav-height: 66px;
	--nav-radius: 16px;

	/* ==========================================================================
	   20. Homepage Editorial Rhythm
	   Generous section breathing room; mobile stays spacious, not wasteful.
	   ========================================================================== */
	--layout-section-spacing-home: clamp(3.5rem, 6vw + 1rem, 6.5rem);
}

/* ==========================================================================
   17. Reduced Motion Overrides
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-duration-fast: 0ms;
		--motion-duration-normal: 0ms;
		--motion-duration-slow: 0ms;
		--motion-ease-standard: linear;
		--motion-ease-emphasized: linear;
	}
}