/* Spacing, radii, layout and motion.
   The Figma "Ungrouped" collection carries a numeric gap scale (unitless floats,
   see fig-tokens.css: --gap-0 … --gap-5, --spacing-xxs). The editorial values
   below are the rhythm actually used on the 1512px Studio website frame. */
:root{
  /* Component gaps — the Figma float scale, expressed as lengths */
  --space-0:0px;
  --space-1:4px;
  --space-1-5:6px;
  --space-2:8px;
  --space-2-5:10px;
  --space-3:12px;
  --space-3-5:14px;
  --space-4:16px;
  --space-4-5:18px;
  --space-5:20px;

  /* Editorial rhythm */
  --space-6:24px;
  --space-8:32px;
  --space-9:36px;
  --space-10:40px;
  --space-12:48px;
  --space-17:68px;
  --space-20:80px;
  --space-24:96px;
  --space-30:120px;

  /* Layout */
  --page-width:1512px;
  --page-gutter:100px;
  --content-max:1309px;
  --column-gap:96px;

  /* Radii */
  --radius-none:0px;
  --radius-media:44px;   /* every photo / case card in the source */
  --radius-pill:200px;   /* marketing pill buttons */
  --radius-full:9999px;  /* UI-kit pill + icon buttons */

  /* Borders — the system is border-light: 1px hairlines only */
  --border-hairline:1px solid var(--rule-hairline);
  --border-on-blue:1px solid var(--rule-on-blue);
  --ring-outlined:inset 0 0 0 1px rgba(31,53,97,.16); /* @kind shadow */
  --ring-outlined-disabled:inset 0 0 0 1px rgba(31,53,97,.12); /* @kind shadow */

  /* Elevation — the source uses no drop shadows. These are the only two
     lifts sanctioned for interactive surfaces. */
  --shadow-none:none;
  --shadow-soft:0 2px 8px rgba(68,70,85,.06);
  --shadow-lifted:0 12px 32px rgba(68,70,85,.10);

  /* Motion */
  --ease-calm:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */

  /* Grain overlay used on every photographic surface */
  --texture-grain:url('../assets/textures/grain-noise.png'); /* @kind other */
  --texture-grain-size:1024px 1024px; /* @kind other */
  --texture-grain-opacity:.12; /* @kind other */
}

a{color:var(--accent-secondary);text-decoration:none;transition:color var(--duration-fast) var(--ease-calm)}
a:hover{color:var(--accent-primary)}