/* ==========================================================================
   VARIABLES  -  the single source of truth for the design system
   --------------------------------------------------------------------------
   Every colour, size, radius, shadow and timing used anywhere in the theme is
   declared here. Section styles must never hard-code a hex value or a pixel
   spacing that could have come from a token.
   ========================================================================== */

:root {
	/* ----------------------------------------------------------------------
	   COLOUR
	   ---------------------------------------------------------------------- */

	/* Brand grounds */
	--color-navy:        #071526; /* deepest ground, section 01 / 03 / 05 / 07 */
	--color-navy-soft:   #0D1B2A; /* raised navy surfaces, cards on dark        */
	--color-navy-line:   #17293D; /* hairlines on dark                          */
	--color-dark:        #0D1B2A;

	/* Accent - sky blue.
	   One scale for the whole profile. --sky is the bright step, drawn on navy;
	   --sky-deep is the step that survives a white ground, where the bright one
	   sits at about 2:1 and fails large text. Components never pick between
	   them: they read --accent-ink, which flips with the section theme below. */
	--color-sky:         #45B7E8;
	--color-sky-light:   #8AD4F5;
	--color-sky-deep:    #1B8FD0;
	--color-sky-tint:    rgba(69, 183, 232, 0.14);

	/* Neutrals */
	--color-white:       #FFFFFF;
	--color-light:       #F6F7F9; /* light section ground */
	--color-light-alt:   #EEF1F5; /* alternating light surface */
	--color-line:        #E2E7EE; /* hairlines on light */
	--color-field:       #F8FAFC; /* input fill on a white card             */
	--color-field-line:  #D8DFE8; /* input border - a step darker than line */

	/* Text */
	--color-text:        #1B2A3A;
	--color-text-light:  #667085;
	--color-text-invert: #FFFFFF;
	--color-text-muted-invert: rgba(255, 255, 255, 0.66);

	/* Contextual tokens - these flip per section theme (see layout.css).
	   Components read ONLY these, which is why one card component works on
	   both navy and off-white grounds without a variant class. */
	--ground:            var(--color-light);
	--surface:           var(--color-white);
	--surface-raised:    var(--color-white);
	--ink:               var(--color-text);
	--ink-muted:         var(--color-text-light);
	--hairline:          var(--color-line);
	--accent-ink:        var(--color-sky-deep);

	/* Card accents.
	   Reference 03 gives each service card its own hue, and 08 repeats the set
	   on the contact blocks. Sky stays the brand accent; these are supporting
	   colours only, never used for large areas or for body text. */
	--accent-blue:   #3B7DD8;
	--accent-green:  #1F9D6B;
	--accent-gold:   #D99A22;
	--accent-pink:   #DC4A79;
	--accent-purple: #7C5CD6;
	--accent-teal:   #0F9AA8;
	--accent-navy:   #1B3A5C;

	--accent-blue-tint:   rgba(59, 125, 216, 0.12);
	--accent-green-tint:  rgba(31, 157, 107, 0.12);
	--accent-gold-tint:   rgba(217, 154, 34, 0.14);
	--accent-pink-tint:   rgba(220, 74, 121, 0.12);
	--accent-purple-tint: rgba(124, 92, 214, 0.12);
	--accent-teal-tint:   rgba(15, 154, 168, 0.12);
	--accent-navy-tint:   rgba(27, 58, 92, 0.1);

	/* Feedback */
	--color-success:     #1E8E5A;
	--color-error:       #C6383E;

	/* ----------------------------------------------------------------------
	   TYPOGRAPHY
	   ---------------------------------------------------------------------- */
	--font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

	/* The handwritten mark the reference uses twice - "Your Growth Our Priority"
	   over the closing image, and "Thank You" in the footer. Used for those two
	   marks only, never for copy. */
	--font-script:  'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

	/* Fluid scale: min at 320px, max at 1440px. */
	--text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
	--text-sm:   clamp(0.8125rem, 0.78rem + 0.2vw,  0.9375rem);
	--text-base: clamp(0.9375rem, 0.9rem + 0.25vw,  1.0625rem);
	--text-lg:   clamp(1.0625rem, 1rem + 0.4vw,     1.25rem);
	--text-xl:   clamp(1.25rem,   1.1rem + 0.7vw,   1.625rem);
	--text-2xl:  clamp(1.5rem,    1.25rem + 1.2vw,  2.25rem);
	--text-3xl:  clamp(1.875rem,  1.4rem + 2.2vw,   3rem);
	--text-4xl:  clamp(2.25rem,   1.5rem + 3.4vw,   4rem);
	--text-5xl:  clamp(2.75rem,   1.6rem + 5vw,     5.25rem);

	/* Oversized decorative section number */
	--text-number: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

	--leading-tight: 1.08;
	--leading-snug:  1.25;
	--leading-body:  1.65;

	--tracking-tight: -0.02em;
	--tracking-wide:  0.14em;

	--weight-regular: 400;
	--weight-medium:  500;
	--weight-semi:    600;
	--weight-bold:    700;
	--weight-black:   800;

	/* ----------------------------------------------------------------------
	   SPACE  -  4px base, fluid where it affects section rhythm
	   ---------------------------------------------------------------------- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;

	/* Vertical breathing room inside a section, and the page gutter. */
	--section-padding-y: clamp(4rem, 7vh + 2rem, 7.5rem);
	--gutter:            clamp(1.25rem, 4vw, 3.5rem);

	/* ----------------------------------------------------------------------
	   LAYOUT
	   ---------------------------------------------------------------------- */
	--container:       1440px;

	/* Distance from the inside edge of a container to the viewport edge: the
	   gutter, plus whatever the centred container is leaving beside it. Pull a
	   full-bleed element left by this and it lands exactly on the edge - a
	   guessed -50vw overshoots as soon as the viewport passes --container. */
	--bleed-inline:    calc(var(--gutter) + max(0px, (100vw - var(--container)) / 2));
	--container-text:  62ch;   /* comfortable measure for paragraphs */
	--nav-rail-width:  clamp(3.5rem, 5vw, 6rem);

	/* Fixed chrome. Sections pad themselves clear of these so nothing is ever
	   hidden behind the header or the scroll cue. */
	--header-height:   clamp(60px, 8vh, 92px);
	--cue-height:      clamp(0px, 6vh, 72px);

	/* ----------------------------------------------------------------------
	   RADIUS
	   ---------------------------------------------------------------------- */
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 20px;
	--radius-lg: 32px;
	--radius-xl: 44px;
	--radius-pill: 999px;

	/* ----------------------------------------------------------------------
	   SHADOW  -  soft, low-contrast, premium. Never a hard drop shadow.
	   ---------------------------------------------------------------------- */
	--shadow-xs: 0 1px 2px rgba(7, 21, 38, 0.06);
	--shadow-sm: 0 2px 8px rgba(7, 21, 38, 0.06);
	--shadow-md: 0 12px 28px -12px rgba(7, 21, 38, 0.18);
	--shadow-lg: 0 28px 60px -24px rgba(7, 21, 38, 0.28);
	--shadow-sky: 0 16px 40px -18px rgba(69, 183, 232, 0.55);

	/* ----------------------------------------------------------------------
	   MOTION
	   ---------------------------------------------------------------------- */
	--ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

	--transition-fast:   0.2s var(--ease-out);
	--transition-normal: 0.4s var(--ease-out);
	--transition-slow:   0.7s var(--ease-out);

	--reveal-duration: 0.75s;
	--reveal-distance: 22px;
	--reveal-stagger:  90ms;

	/* ----------------------------------------------------------------------
	   Z-INDEX  -  declared once so nothing ever guesses a number
	   ---------------------------------------------------------------------- */
	--z-behind:    -1;
	--z-base:       1;
	--z-decoration: 2;
	--z-content:    3;
	--z-sticky:    50;
	--z-nav:      100;
	--z-overlay:  200;
	--z-skiplink: 300;
}

/* --------------------------------------------------------------------------
   Section theme contexts.
   A section declares data-theme="dark|light" and every component inside it
   picks up the right ground, ink and hairline automatically.
   -------------------------------------------------------------------------- */

[data-theme='light'] {
	--ground:         var(--color-light);
	--surface:        var(--color-white);
	--surface-raised: var(--color-white);
	--ink:            var(--color-text);
	--ink-muted:      var(--color-text-light);
	--hairline:       var(--color-line);
	--accent-ink:     var(--color-sky-deep);
}

[data-theme='dark'] {
	--ground:         var(--color-navy);
	--surface:        var(--color-navy-soft);
	--surface-raised: #12243A;
	--ink:            var(--color-text-invert);
	--ink-muted:      var(--color-text-muted-invert);
	--hairline:       var(--color-navy-line);
	--accent-ink:     var(--color-sky);
}