/* ==========================================================================
   C7 One World Consultancy — public design tokens
   --------------------------------------------------------------------------
   The single source of truth for the public brand. Components never reach for a
   raw palette value; they use the semantic layer further down, so the whole site
   can be re-toned by changing a handful of declarations here.

   The admin panel has its own separate token file (--adm-*). That separation is
   deliberate: a branding change the client makes for visitors must never alter
   the interface staff work in.

   Brand direction — "One World. One Journey. One Trusted Partner."
     Meridian  a deep oceanic teal-navy. Maps, depth, institutional trust.
     Compass   a warm gold. Aspiration and achievement, used sparingly.
     Voyage    a coral spark reserved for campaign moments and urgency.
     Parchment warm-tinted neutrals so white space reads as fine paper, not screen grey.
   ========================================================================== */

:root {
  /* --- Meridian: primary ------------------------------------------------ */
  --c7-meridian-950: #04121b;
  --c7-meridian-900: #072433;
  --c7-meridian-850: #092c3f;
  --c7-meridian-800: #0b3348;
  --c7-meridian-700: #0f455e;
  --c7-meridian-600: #145a76;
  --c7-meridian-500: #1b7290;
  --c7-meridian-400: #3d96b0;
  --c7-meridian-300: #7cbace;
  --c7-meridian-200: #b5d9e5;
  --c7-meridian-100: #dceef4;
  --c7-meridian-050: #f0f8fb;

  /* --- Compass: accent -------------------------------------------------- */
  --c7-gold-800: #6f4b0d;
  --c7-gold-700: #916313;
  --c7-gold-600: #b8801a;
  --c7-gold-500: #dda02a;
  --c7-gold-400: #edbb5b;
  --c7-gold-300: #f5d493;
  --c7-gold-200: #f9e6c2;
  --c7-gold-100: #fcf3de;

  /* --- Lagoon: the supporting colour ------------------------------------
     The third colour in the lock-up. Used for informational panels and
     supporting detail — never for a state, so it can follow the brand without
     confusing "this is a note" with "this went wrong". Regenerated from
     Settings → Branding at runtime. */
  --c7-teal-700: #2b514f;
  --c7-teal-600: #3a6d6a;
  --c7-teal-500: #498789;
  --c7-teal-400: #6ea9a6;
  --c7-teal-300: #9bc7c4;
  --c7-teal-200: #c4dedd;
  --c7-teal-100: #e6f2f1;

  /* --- Voyage: campaign spark ------------------------------------------- */
  --c7-coral-700: #a2331c;
  --c7-coral-600: #c6452a;
  --c7-coral-500: #e25b3a;
  --c7-coral-400: #f07e5f;
  --c7-coral-100: #fdeae3;

  /* --- Parchment: warm neutrals ----------------------------------------- */
  --c7-ink-950: #14171a;
  --c7-ink-900: #1f2429;
  --c7-ink-800: #2d343a;
  --c7-ink-700: #3f474e;
  --c7-ink-600: #566068;
  --c7-ink-500: #6f7981;
  --c7-ink-400: #939ba2;
  --c7-ink-300: #b8bec3;
  --c7-ink-200: #d8dcdf;
  --c7-ink-150: #e6e9eb;
  --c7-ink-100: #f0f2f3;
  --c7-ink-050: #f7f8f8;
  --c7-paper: #fdfcfa;
  --c7-white: #ffffff;

  /* --- Support ---------------------------------------------------------- */
  --c7-success: #1f7a52;
  --c7-success-soft: #e3f4ec;
  --c7-warning: #a86a11;
  --c7-warning-soft: #fdf1dd;
  --c7-danger: #b3291f;
  --c7-danger-soft: #fceae8;
  --c7-info: var(--c7-meridian-600);
  --c7-info-soft: var(--c7-meridian-100);

  /* ======================================================================
     Semantic layer — what components actually use
     ====================================================================== */
  --c7-canvas: var(--c7-paper);
  --c7-canvas-alt: var(--c7-meridian-050);
  --c7-canvas-warm: #faf7f2;
  --c7-surface: var(--c7-white);
  --c7-surface-sunken: var(--c7-ink-050);
  --c7-surface-inverse: var(--c7-meridian-900);
  --c7-surface-inverse-alt: var(--c7-meridian-850);

  --c7-text: var(--c7-ink-700);
  --c7-text-strong: var(--c7-meridian-900);
  --c7-text-muted: var(--c7-ink-500);
  --c7-text-inverse: var(--c7-white);
  --c7-text-inverse-muted: rgb(255 255 255 / 0.72);

  --c7-border: var(--c7-ink-150);
  --c7-border-subtle: var(--c7-ink-100);
  --c7-border-strong: var(--c7-ink-200);
  --c7-border-inverse: rgb(255 255 255 / 0.16);

  --c7-brand: var(--c7-meridian-800);
  --c7-brand-hover: var(--c7-meridian-700);
  --c7-brand-contrast: var(--c7-white);
  --c7-accent: var(--c7-gold-500);
  --c7-accent-hover: var(--c7-gold-600);
  --c7-accent-contrast: var(--c7-meridian-950);
  --c7-spark: var(--c7-coral-500);

  --c7-focus: var(--c7-gold-500);
  --c7-focus-ring: 0 0 0 3px rgb(221 160 42 / 0.45);
  --c7-selection-bg: var(--c7-meridian-200);

  /* ======================================================================
     Typography
     ====================================================================== */
  --c7-font: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c7-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Fluid display sizes. Each clamp is tuned so the smallest value stays
     readable on a 360px phone without the heading wrapping to four lines. */
  --c7-text-display-1: clamp(2.5rem, 1.35rem + 4.8vw, 5rem);
  --c7-text-display-2: clamp(2.125rem, 1.35rem + 3.2vw, 3.625rem);
  --c7-text-display-3: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --c7-text-3xl: clamp(1.625rem, 1.35rem + 1.15vw, 2.125rem);
  --c7-text-2xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --c7-text-xl: 1.25rem;
  --c7-text-lg: 1.125rem;
  --c7-text-base: 1rem;
  --c7-text-sm: 0.9375rem;
  --c7-text-xs: 0.8125rem;
  --c7-text-2xs: 0.6875rem;

  --c7-leading-tight: 1.1;
  --c7-leading-snug: 1.28;
  --c7-leading-normal: 1.55;
  --c7-leading-relaxed: 1.75;

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

  /* Display type needs negative tracking to stop large sizes reading loose. */
  --c7-tracking-display: -0.028em;
  --c7-tracking-heading: -0.018em;
  --c7-tracking-normal: 0;
  --c7-tracking-caps: 0.14em;

  /* ======================================================================
     Space, layout, shape
     ====================================================================== */
  --c7-space-1: 0.25rem;
  --c7-space-2: 0.5rem;
  --c7-space-3: 0.75rem;
  --c7-space-4: 1rem;
  --c7-space-5: 1.25rem;
  --c7-space-6: 1.5rem;
  --c7-space-8: 2rem;
  --c7-space-10: 2.5rem;
  --c7-space-12: 3rem;
  --c7-space-16: 4rem;
  --c7-space-20: 5rem;
  --c7-space-24: 6rem;

  --c7-container: 78rem;
  --c7-container-narrow: 46rem;
  --c7-container-wide: 88rem;
  --c7-gutter: clamp(1.125rem, 4vw, 2.5rem);
  --c7-section-y: clamp(3.5rem, 7vw, 7rem);
  --c7-header-height: 5rem;
  --c7-header-height-compact: 4.25rem;
  --c7-control-height: 3rem;

  --c7-radius-xs: 6px;
  --c7-radius-sm: 10px;
  --c7-radius-md: 14px;
  --c7-radius-lg: 20px;
  --c7-radius-xl: 28px;
  --c7-radius-2xl: 36px;
  --c7-radius-pill: 999px;

  /* Shadows carry a trace of the brand navy rather than neutral black, which is
     what keeps stacked cards from looking grey and cheap. */
  --c7-shadow-xs: 0 1px 2px rgb(7 36 51 / 0.06);
  --c7-shadow-sm: 0 2px 8px rgb(7 36 51 / 0.07), 0 1px 2px rgb(7 36 51 / 0.04);
  --c7-shadow-md: 0 8px 26px rgb(7 36 51 / 0.09), 0 2px 6px rgb(7 36 51 / 0.05);
  --c7-shadow-lg: 0 20px 52px rgb(7 36 51 / 0.14), 0 4px 12px rgb(7 36 51 / 0.06);
  --c7-shadow-xl: 0 36px 88px rgb(7 36 51 / 0.2);
  --c7-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.08);

  /* --- Signature gradients ---------------------------------------------- */
  --c7-gradient-brand: linear-gradient(135deg, var(--c7-meridian-900) 0%, var(--c7-meridian-700) 55%, var(--c7-meridian-600) 100%);
  --c7-gradient-accent: linear-gradient(120deg, var(--c7-gold-500) 0%, var(--c7-gold-400) 100%);
  --c7-gradient-spark: linear-gradient(120deg, var(--c7-coral-600) 0%, var(--c7-gold-500) 100%);
  /* Sits over a photograph so white type stays legible at the bottom edge. */
  --c7-scrim: linear-gradient(180deg, rgb(4 18 27 / 0.15) 0%, rgb(4 18 27 / 0.55) 45%, rgb(4 18 27 / 0.86) 100%);
  --c7-scrim-side: linear-gradient(100deg, rgb(4 18 27 / 0.9) 0%, rgb(4 18 27 / 0.72) 42%, rgb(4 18 27 / 0.25) 100%);

  /* ======================================================================
     Motion & depth
     ====================================================================== */
  --c7-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --c7-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --c7-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --c7-duration-fast: 150ms;
  --c7-duration-base: 260ms;
  --c7-duration-slow: 520ms;

  --c7-z-base: 1;
  --c7-z-sticky: 100;
  --c7-z-header: 200;
  --c7-z-megamenu: 250;
  --c7-z-scrim: 400;
  --c7-z-drawer: 500;
  --c7-z-modal: 600;
  --c7-z-toast: 700;
  --c7-z-skip: 900;
}

/* One rule disables motion across the entire site. Setting it at the token level
   means no component has to remember to honour the preference itself. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --c7-duration-fast: 0ms;
    --c7-duration-base: 0ms;
    --c7-duration-slow: 0ms;
  }
}