/* ===========================================================================
   Future Dynamics — design tokens
   ---------------------------------------------------------------------------
   The single source of truth for colour, type, space and layout. Every other
   stylesheet reads from here and defines no raw values of its own, so a change
   made once lands on every page.

   Values are measured from NEW DESIGN/Home_SELECTED Style.png (1440 x 1832),
   not estimated. Where the mock-up sat a few pixels off a round grid, the grid
   wins, because a page assembled by hand drifts and a page assembled from a
   scale does not.
   =========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Six roles, no more. A new colour here has to earn a role; a one-off tint
     belongs in the component that needs it, not in this file. */

  --fd-brand:        #7F95B1;   /* wordmark, headings, service labels */
  --fd-ink:          #201F1F;   /* footer column headings, strongest text */
  --fd-text:         #7A7A7A;   /* body copy, nav, links */
  --fd-bg:           #FFFFFF;   /* page ground */
  --fd-surface:      #FBF9F6;   /* mission panel, services strip, footer */
  --fd-border:       #E2DAD0;   /* hairlines and card edges */

  --fd-crimson:      #B70C26;   /* the fine line inside the rule bar */
  --fd-close-bar:    #9A9A9A;   /* the close glyph's rays, sampled from the artwork */

  /* Focus. A hard two pixel rule on a square button is the one place the
     interface looked like a form control, so the ring is softened to a halo in
     the brand colour and the icon buttons are rounded for it to follow.
     The solid fallback comes first for anything without color-mix. */
  --fd-focus-ring: rgba(127, 149, 177, 0.55);
  --fd-focus-ring: color-mix(in srgb, var(--fd-brand) 55%, transparent);
  --fd-focus-halo: rgba(127, 149, 177, 0.18);
  --fd-focus-halo: color-mix(in srgb, var(--fd-brand) 18%, transparent);

  /* The golden sphere, lifted from the logo artwork so the mark and the
     interface quote the same four stops. Used by the menu toggle's close
     state, and available to anything else that needs the brand's gold. */
  --fd-sphere: radial-gradient(circle at 36% 32%,
      #FFFABE 8%, #EAAB4B 43%, #A67D22 73%, #B78001 100%);

  /* The rule bar, straight from the supplied SVG. The gradients run vertically
     now, not across, so the bar reads as a machined edge rather than a ribbon.
     Stops and offsets are the artwork's own, including the two that fade out at
     the foot of each band. Bands are 18.5 / 3 / 18.5 to total the SVG's 40. */
  --fd-bar-silver: linear-gradient(180deg,
      #E7E7E7 17.31%, #DAD8D8 33.65%, #C0BFBF 50.96%, #DBDBDB 79.81%,
      rgba(185, 185, 185, 0.62) 100%);
  --fd-bar-gold: linear-gradient(180deg,
      #F9E3BE 1.44%, #F0DAA8 21.63%, #C6A128 56.73%, #ECD571 79.81%,
      rgba(236, 213, 113, 0.71) 98.08%);

  /* Buttons, taken from the Figma spec rather than sampled off the mock-up.
     Both faces are translucent and both get their depth from one inset shadow,
     which is why they sit so quietly on the warm surface: the panel shows
     through them. Over #FBF9F6 the gold resolves to #C0AE80, which is the
     value measured off the artwork, so spec and render agree. */
  --fd-on-gold:             #FFFFFF;   /* label colour on the gold face */
  --fd-button-gold-face:    rgba(128, 92, 0, 0.48);
  --fd-button-gold-inset:   inset 1px -3px 19.1px rgba(253, 253, 253, 0.5);
  --fd-button-second-face:  rgba(255, 255, 255, 0.48);
  --fd-button-second-inset: inset 0 -1px 8.1px rgba(155, 125, 47, 0.47);

  /* --- Type --------------------------------------------------------------
     One family. The wordmark is vector art, so no display face is loaded for
     it, which keeps the page free of webfont requests entirely. */

  --fd-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  /* Button and nav labels sit at 16px / 500 / 100% leading, per the spec. */
  --fd-label-size:    1rem;
  --fd-label-leading: 1;

  /* A fourth-based scale. Each step is the one below times ~1.25. */
  --fd-text-xs:   0.75rem;    /* 12px  footer headings, overlines */
  --fd-text-sm:   0.8125rem;  /* 13px  service labels */
  --fd-text-base: 1rem;       /* 16px  nav, footer links */
  --fd-text-md:   1.0625rem;  /* 17px  body copy */
  --fd-text-lg:   1.5rem;     /* 24px  card headings */
  --fd-text-xl:   1.625rem;   /* 26px  hero subtitle */
  --fd-text-display: 2.5rem;  /* 40px  inner page titles */

  --fd-leading-tight: 1.2;
  --fd-leading-body:  1.74;   /* 29.5px on 17px, measured off the mock-up */
  --fd-leading-snug:  1.5;

  --fd-tracking-wide:  0.08em;  /* service labels */
  --fd-tracking-wider: 0.1em;   /* footer column headings */

  --fd-weight-regular: 400;
  --fd-weight-medium:  500;
  --fd-weight-bold:    700;

  /* --- Space -------------------------------------------------------------
     One scale, used for every gap on the page. Section rhythm sits at the top
     end: the mock-up's 76 / 97 / 128 / 143 round cleanly onto it. */

  --fd-space-1:   4px;
  --fd-space-2:   8px;
  --fd-space-3:   12px;
  --fd-space-4:   16px;
  --fd-space-5:   24px;
  --fd-space-6:   32px;
  --fd-space-7:   40px;
  --fd-space-8:   48px;
  --fd-space-9:   64px;
  --fd-space-10:  80px;
  --fd-space-11:  96px;
  --fd-space-12:  128px;
  --fd-space-13:  144px;

  /* --- Layout ------------------------------------------------------------
     A 12 column grid, 1248px of content inside a 96px gutter at the design
     width. The gutter collapses on narrow viewports; the column count never
     changes, so a block that spans 6 columns spans 6 everywhere. */

  --fd-content:     1248px;
  --fd-gutter:      clamp(24px, 6.6667vw, 96px);
  --fd-columns:     12;
  --fd-column-gap:  24px;

  /* --- Shape -------------------------------------------------------------- */

  --fd-radius-sm:  4px;    /* the rule bar's outer corners */
  --fd-radius-md:  6px;    /* buttons, per the Figma spec */
  --fd-radius-lg:  12px;   /* mission panel. Measured at ~11px off the artwork */
  --fd-radius-xl:  20px;   /* the card, per the Figma spec and ~18px measured */

  --fd-hairline: 1px solid var(--fd-border);

  /* A single wide, shallow shadow. Measured in the artwork as a falloff that
     reaches white about 50px below the card's edge, which is the spec's blur
     exactly. Nothing else on the page is lifted, so this is the one elevation
     the system has. */
  --fd-shadow-card: 0 4px 50px rgba(0, 0, 0, 0.08);

  /* --- Motion ------------------------------------------------------------
     Declared now so the animation pass has a vocabulary to reach for rather
     than inventing durations per element. Nothing uses them yet. */

  --fd-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);  /* power1.out, for hovers */
  --fd-ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out: long, soft settle */

  --fd-duration-fast: 280ms;   /* hover, pressed. Still answers the pointer at once */
  --fd-duration-base: 560ms;   /* menu, toggles */
  --fd-duration-slow: 1800ms;  /* scroll reveal */

  /* The reveal travels 16px on expo.out, so it arrives quickly and then takes
     its time settling. That long tail is what makes it read as soft rather
     than brisk. Staying at or under 16px keeps it a fade, not a slide. */
  --fd-reveal-rise:    16px;
  --fd-reveal-stagger: 180ms;  /* between whole blocks */
  --fd-reveal-step:    130ms;  /* between items inside one row */

  /* The menu has its own timing and does not borrow the page's.
     expo.out over 1800ms spends 86% of a 16px travel in the first half second
     and then creeps 2px for another second, which reads as appearing rather
     than sliding. A menu wants to be seen moving: shorter, further, and on a
     curve that keeps travelling. The items come in from the right, the same
     direction the panel does, so the two read as one movement. */
  --fd-menu-item-travel:   28px;
  --fd-menu-item-duration: 640ms;
  --fd-menu-item-step:     80ms;

  --fd-marquee: 38s;   /* one full pass of the services row on mobile */

  /* Pointer parallax on the lockup. Depth is expressed as travel: the sphere
     sits nearest and moves most, the wave behind it, the wordmark barely at
     all. The script eases toward the pointer rather than tracking it, which is
     where the spring comes from. */
  --fd-depth-sphere: 16px;
  --fd-depth-wave:    8px;
  --fd-depth-word:    2px;
  --fd-depth-tilt:    5deg;
  --fd-depth-ease:    0.055;  /* read by site.js, not by CSS */
}