/* ─────────────────────────────────────────────────────────────────
 *  Falcon Vision Adventures — Design Tokens
 *
 *  Single source of truth for the brand. Every color, font size,
 *  spacing value, motion duration, and breakpoint referenced
 *  anywhere else in the theme is defined here.
 *
 *  Naming convention:
 *    --fv-{category}-{role}-{variant}
 *
 *  Categories: color, font, size, space, radius, motion, shadow,
 *  z, layer, easing, breakpoint.
 * ───────────────────────────────────────────────────────────────── */

:root {

	/* ╭─────────────────────────────────────────────╮
	 * │ COLOR                                        │
	 * ╰─────────────────────────────────────────────╯
	 * The brand lives in a black-dominant space with a deep falcon-blue
	 * primary and a single ember-red accent. Greys are tuned to feel
	 * photographic, not flat.
	 */
	--fv-color-black:           #000000;
	--fv-color-obsidian:        #0A0A0A;  /* subtle lift from pure black for cards */
	--fv-color-smoke:           #141414;  /* secondary/raised surface */
	--fv-color-charcoal:        #1F1F1F;  /* borders, hairlines on dark */
	--fv-color-graphite:        #2A2A2A;  /* hover lift */
	--fv-color-ash:             #444444;
	--fv-color-mist:            #A6B0BA;  /* muted text on dark */
	--fv-color-bone:            #E9E6DF;  /* warm off-white for editorial copy */
	--fv-color-white:           #FFFFFF;

	/* Brand primary — Falcon Blue, a deep, slightly cool navy. */
	--fv-color-blue:            #0E4E9E;
	--fv-color-blue-dark:       #093A78;
	--fv-color-blue-light:      #2B6CC7;

	/* Brand accent — Sahara Ember, a saturated cinematic red-orange. */
	--fv-color-accent:          #BE190E;
	--fv-color-accent-dark:     #8F1209;
	--fv-color-accent-light:    #E0301F;

	/* Editorial gold — used sparingly for awards, accreditation marks,
	 * and subtle dividers on About / Story sections. */
	--fv-color-gold:            #C9A24F;
	--fv-color-gold-dark:       #8E711F;

	/* Semantic aliases — what code actually references */
	--fv-bg:                    var(--fv-color-black);
	--fv-bg-raised:             var(--fv-color-smoke);
	--fv-bg-card:               var(--fv-color-obsidian);
	--fv-fg:                    var(--fv-color-white);
	--fv-fg-muted:              var(--fv-color-mist);
	--fv-fg-subtle:             rgba(255, 255, 255, 0.55);
	--fv-border:                rgba(255, 255, 255, 0.10);
	--fv-border-strong:         rgba(255, 255, 255, 0.20);
	--fv-overlay-soft:          rgba(0, 0, 0, 0.30);
	--fv-overlay-medium:        rgba(0, 0, 0, 0.50);
	--fv-overlay-deep:          rgba(0, 0, 0, 0.75);

	/* Selection */
	--fv-selection-bg:          rgba(14, 78, 158, 0.40);
	--fv-selection-fg:          var(--fv-color-white);


	/* ╭─────────────────────────────────────────────╮
	 * │ TYPOGRAPHY                                   │
	 * ╰─────────────────────────────────────────────╯
	 * Display: a refined sans with sharp uppercase tracking.
	 * Avenir was the design target; we fall back gracefully to
	 * licensed open alternatives that share the same architecture.
	 * (Inter and system are intentionally last-resort.)
	 */
	--fv-font-display:   "Forum", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--fv-font-heading:   "Tenor Sans", "Avenir Next", "Avenir LT Pro", "Helvetica Neue", system-ui, sans-serif;
	--fv-font-body:      "Avenir Next", "Avenir LT Pro", "Inter", "Helvetica Neue", system-ui, sans-serif;
	--fv-font-mono:      "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Type scale — modular, ratio 1.250 (major third), 17px base */
	--fv-text-2xs:       0.6875rem;   /* 11px — micro labels */
	--fv-text-xs:        0.75rem;     /* 12px — small caps */
	--fv-text-sm:        0.875rem;    /* 14px — UI text */
	--fv-text-base:      1.0625rem;   /* 17px — body */
	--fv-text-lg:        1.25rem;     /* 20px — lede */
	--fv-text-xl:        1.5rem;      /* 24px — sub headings */
	--fv-text-2xl:       2rem;        /* 32px */
	--fv-text-3xl:       2.5rem;      /* 40px */
	--fv-text-4xl:       3.25rem;     /* 52px */
	--fv-text-5xl:       4rem;        /* 64px */
	--fv-text-6xl:       5rem;        /* 80px */
	--fv-text-7xl:       6.5rem;      /* 104px — only on hero on very large viewports */

	/* Line heights */
	--fv-leading-tight:   1.08;
	--fv-leading-snug:    1.25;
	--fv-leading-normal:  1.55;
	--fv-leading-relaxed: 1.75;
	--fv-leading-loose:   1.95;

	/* Letter spacing — the brand's signature is wide tracked caps */
	--fv-tracking-tight:   -0.02em;
	--fv-tracking-normal:  0;
	--fv-tracking-wide:    0.05em;
	--fv-tracking-wider:   0.10em;
	--fv-tracking-widest:  0.20em;
	--fv-tracking-extreme: 0.30em;
	--fv-tracking-max:     0.40em;

	/* Weights */
	--fv-weight-light:    300;
	--fv-weight-regular:  400;
	--fv-weight-medium:   500;
	--fv-weight-semibold: 600;
	--fv-weight-bold:     700;


	/* ╭─────────────────────────────────────────────╮
	 * │ SPACING                                      │
	 * ╰─────────────────────────────────────────────╯
	 * 4px base. Section paddings get their own scale to keep editorial
	 * sections breathing room consistent.
	 */
	--fv-space-0:    0;
	--fv-space-1:    0.25rem;   /* 4 */
	--fv-space-2:    0.5rem;    /* 8 */
	--fv-space-3:    0.75rem;   /* 12 */
	--fv-space-4:    1rem;      /* 16 */
	--fv-space-5:    1.25rem;   /* 20 */
	--fv-space-6:    1.5rem;    /* 24 */
	--fv-space-8:    2rem;      /* 32 */
	--fv-space-10:   2.5rem;    /* 40 */
	--fv-space-12:   3rem;      /* 48 */
	--fv-space-16:   4rem;      /* 64 */
	--fv-space-20:   5rem;      /* 80 */
	--fv-space-24:   6rem;      /* 96 */
	--fv-space-32:   8rem;      /* 128 */
	--fv-space-40:   10rem;     /* 160 */

	/* Section paddings — the breathing room between major sections */
	--fv-section-y:        clamp(4rem, 8vw, 8rem);
	--fv-section-y-tight:  clamp(2.5rem, 5vw, 5rem);
	--fv-section-y-loose:  clamp(5rem, 11vw, 11rem);

	/* Container */
	--fv-container-max:    1440px;
	--fv-container-x:      clamp(1rem, 4vw, 3rem);


	/* ╭─────────────────────────────────────────────╮
	 * │ RADII                                        │
	 * ╰─────────────────────────────────────────────╯
	 * The brand is sharp-cornered. Almost everything uses radius 0.
	 * The tiny radii are for inputs and the WhatsApp pill.
	 */
	--fv-radius-none:  0;
	--fv-radius-xs:    2px;
	--fv-radius-sm:    4px;
	--fv-radius-md:    8px;
	--fv-radius-pill:  9999px;


	/* ╭─────────────────────────────────────────────╮
	 * │ MOTION                                       │
	 * ╰─────────────────────────────────────────────╯
	 * Cinematic timing — slow on big moves, snappy on micro.
	 */
	--fv-dur-instant:  100ms;
	--fv-dur-fast:     200ms;
	--fv-dur-base:     350ms;
	--fv-dur-slow:     600ms;
	--fv-dur-slower:   1000ms;
	--fv-dur-cinema:   1500ms;

	/* Easings */
	--fv-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* expo-out, for reveals */
	--fv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* image crossfades */
	--fv-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);     /* default UI */
	--fv-ease-accel:  cubic-bezier(0.4, 0, 1, 1);       /* exits */


	/* ╭─────────────────────────────────────────────╮
	 * │ SHADOWS & GLOWS                              │
	 * ╰─────────────────────────────────────────────╯
	 * On a black background, glows replace lift-shadows.
	 */
	--fv-shadow-card:    0 30px 80px -20px rgba(0, 0, 0, 0.6);
	--fv-shadow-deep:    0 40px 120px -10px rgba(0, 0, 0, 0.8);
	--fv-glow-blue:      0 0 80px -10px rgba(14, 78, 158, 0.45);
	--fv-glow-accent:    0 0 80px -10px rgba(190, 25, 14, 0.40);


	/* ╭─────────────────────────────────────────────╮
	 * │ Z-INDEX SCALE                                │
	 * ╰─────────────────────────────────────────────╯
	 */
	--fv-z-base:        1;
	--fv-z-raised:      10;
	--fv-z-overlay:     20;
	--fv-z-header:      50;
	--fv-z-drawer:      60;
	--fv-z-whatsapp:    70;
	--fv-z-modal:       80;
	--fv-z-toast:       90;


	/* ╭─────────────────────────────────────────────╮
	 * │ BREAKPOINTS (reference values for JS)       │
	 * ╰─────────────────────────────────────────────╯
	 * CSS still uses @media (min-width: 768px) etc. directly because
	 * custom properties cannot be used in media queries. These are
	 * exposed for JS scripts that query them via getComputedStyle.
	 */
	--fv-bp-sm: 640px;
	--fv-bp-md: 768px;
	--fv-bp-lg: 1024px;
	--fv-bp-xl: 1280px;
	--fv-bp-2xl: 1536px;
}

/* ─────────────────────────────────────────────────────────────────
 * Honor user OS preferences.
 * ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	:root {
		--fv-dur-instant:  0ms;
		--fv-dur-fast:     0ms;
		--fv-dur-base:     0ms;
		--fv-dur-slow:     0ms;
		--fv-dur-slower:   0ms;
		--fv-dur-cinema:   0ms;
	}
}