/* =============================================================================
   Gulliver Robotics — SKIN (design-token values).
   -----------------------------------------------------------------------------
   This file is the site's look: it redefines ONLY the values of the contract's
   variables (see gvn-base/assets/css/tokens.css). Components are never touched.
   Source: the Gulliver Robotics page — dark single-page site, coral as the only
   accent, navy as support, Work Sans + IBM Plex Mono (+ Silkscreen wordmark).

   A dark site inside a contract born light: the "light" roles keep their NAMES
   and get dark VALUES. --surface-page is the page background whatever its
   brightness, --text-primary is the main text colour. That is why the
   components need no change.

   Fonts are managed by WordPress through theme.json. Tokens are also defined on
   .editor-styles-wrapper so the block editor previews the dark look.
   ========================================================================== */

:root, body, .editor-styles-wrapper {

	/* ---- Neutrals (light → dark, from the design's greys) ---- */
	--neutral-50:  #f3efeb;
	--neutral-100: #e4e0dc;
	--neutral-200: #c9c6c3;
	--neutral-300: #a7a6a4;
	--neutral-400: #8b8b8a;
	--neutral-500: #6f7377;
	--neutral-600: #4a4e52;
	--neutral-700: #2a2e33;
	--neutral-800: #1c2024;
	--neutral-900: #121416;
	--white:       #ffffff;

	/* ---- Brand: identity = CORAL ---- */
	--color-primary:        #e0644a;
	--color-primary-hover:  #ea7259;
	--color-primary-subtle: rgba(224, 100, 74, 0.12);
	--on-primary:           #1a0d09;

	/* ---- Support = NAVY ---- */
	--color-secondary:       #1d3a78;
	--color-secondary-hover: #244791;
	--on-secondary:          #f3efeb;

	/* ---- Action (CTA, links, focus): coral, with dark ink on it ---- */
	--color-action:        #e0644a;
	--color-action-hover:  #ea7259;
	--color-action-subtle: rgba(224, 100, 74, 0.12);
	--on-action:           #1a0d09;
	--accent-warm:         #e0644a;

	/* ---- Gradients (the design is flat: coral stays a plain colour) ---- */
	--gradient-primary:   #e0644a;
	--gradient-secondary: linear-gradient(135deg, #1d3a78 0%, #2f63e0 100%);
	--gradient-hero:      radial-gradient(900px 500px at 85% 20%, rgba(47, 99, 224, 0.13), transparent 70%), linear-gradient(#16191c, #121416);

	/* ---- States ---- */
	--color-success:    #7fd3a6;  --color-success-bg: rgba(127, 211, 166, 0.12);
	--color-warning:    #e8b04a;  --color-warning-bg: rgba(232, 176, 74, 0.12);
	--color-error:      #ef6b5b;  --color-error-bg:   rgba(239, 107, 91, 0.12);
	--color-info:       #6f97f0;  --color-info-bg:    rgba(111, 151, 240, 0.12);

	/* ---- Text ---- */
	--text-primary:    #f3efeb;
	--text-secondary:  #a7a6a4;
	--text-muted:      #6f7377;
	--text-on-dark:    #f3efeb;
	--text-link:       var(--color-action);
	--text-link-hover: var(--color-action-hover);
	--text-accent:     var(--color-action);

	/* ---- Surfaces ---- */
	--surface-page:    #121416;
	--surface-card:    #1c2024;
	--surface-muted:   #16191c;
	--surface-sunken:  var(--color-primary-subtle);
	--surface-dark:    #151a24;
	--surface-brand:   var(--color-primary);
	--on-surface-dark: #f3efeb;

	/* ---- Borders & focus (hairlines, as in the design) ---- */
	--border-default:   rgba(243, 239, 235, 0.14);
	--border-strong:    rgba(243, 239, 235, 0.32);
	--divider:          rgba(243, 239, 235, 0.08);
	--border-on-dark:   rgba(243, 239, 235, 0.14);
	--border-brand:     var(--color-action);
	--focus-ring-color: #e0644a;
	--focus-ring:       0 0 0 2px var(--surface-page), 0 0 0 4px #e0644a;

	/* ---- Layout ---- */
	--container:      1180px;
	--gutter:         clamp(16px, 4vw, 40px);
	--section-gap:    clamp(64px, 9vw, 120px);
	--section-gap-sm: clamp(48px, 6vw, 80px);
	--header-h:       64px;

	/* ---- Radii ---- */
	--radius-sm:   8px;
	--radius-md:   14px;
	--radius-lg:   20px;
	--radius-xl:   22px;
	--radius-full: 9999px;

	/* ---- Shadows (cards are flat; depth belongs to the images) ---- */
	--shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.30);
	--shadow-md:         0 4px 14px rgba(0, 0, 0, 0.35);
	--shadow-lg:         0 30px 60px rgba(0, 0, 0, 0.45);
	--shadow-card:       none;
	--shadow-card-hover: 0 18px 40px -16px rgba(0, 0, 0, 0.60);
	--shadow-glow:       0 0 0 rgba(0, 0, 0, 0);

	/* ---- Type scale (from the design's clamps) ---- */
	--fs-display: clamp(2.375rem, 5.6vw, 4.5rem);   /* 38 → 72px */
	--fs-h1:      clamp(2.125rem, 4.8vw, 3.5rem);   /* 34 → 56px */
	--fs-h2:      clamp(1.875rem, 4.2vw, 3.25rem);  /* 30 → 52px */
	--fs-h3:      1.25rem;     /* 20px */
	--fs-h4:      1.125rem;    /* 18px */
	--fs-body-lg: 1.0625rem;   /* 17px */
	--fs-body:    1rem;        /* 16px */
	--fs-caption: 0.9375rem;   /* 15px */
	--fs-small:   0.875rem;    /* 14px */
	--fs-micro:   0.75rem;     /* 12px */

	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     600;   /* the design's headings stop at 600 */

	--leading-none:   1;
	--leading-tight:  1.1;
	--leading-snug:   1.25;
	--leading-normal: 1.6;

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

	/* ---- Motion ---- */
	--ease-standard: ease;
}