/* BRO'S CREATIVE STUDIO — design tokens
   Single source of truth for colour, type, radius, elevation and motion.
   "Studio Print": electric blue leads, ink borders on every surface,
   hard-offset (never blurred) shadows, the hexagon symbol as the mark. */
:root{
  /* Brand core */
  --electric: #2563EB;
  --electric-700: #1D4ED8;
  --electric-600: #2E6BF0;
  --electric-100: #DBEAFE;
  --electric-50: #EFF6FF;
  --ink: #111827;
  --ink-950: #0B0F1A;
  --paper: #F8FAFC;
  --white: #FFFFFF;

  /* Secondary / accent */
  --spark: #F97316;
  --spark-700: #EA580C;
  --spark-100: #FFEDD5;
  --spark-50: #FFF7ED;
  --signal: #009B77;
  --signal-700: #007C5F;
  --signal-100: #CCEBE4;
  --signal-50: #F0F9F7;
  --alert: #D71B24;
  --alert-700: #B0121A;
  --alert-100: #FBE1E3;
  --alert-50: #FEF2F2;

  /* Neutral ramp */
  --n-900: #111827;
  --n-800: #1F2937;
  --n-700: #374151;
  --n-600: #4B5563;
  --n-500: #6B7280;
  --n-400: #9CA3AF;
  --n-300: #CBD5E1;
  --n-200: #E2E8F0;
  --n-100: #F1F5F9;
  --n-50:  #F8FAFC;

  /* Semantic */
  --info: var(--electric);
  --success: var(--signal);
  --warning: var(--spark);
  --error: var(--alert);

  /* Service colours — mapped onto the palette, no new hues */
  --svc-av: var(--alert);          --svc-av-deep: var(--alert-700);
  --svc-av-tint: var(--alert-100); --svc-av-wash: var(--alert-50);
  --svc-web: var(--ink);           --svc-web-deep: var(--ink-950);
  --svc-web-tint: var(--n-200);    --svc-web-wash: var(--n-100);
  --svc-design: var(--signal);       --svc-design-deep: var(--signal-700);
  --svc-design-tint: var(--signal-100); --svc-design-wash: var(--signal-50);
  --svc-mkt: var(--electric);          --svc-mkt-deep: var(--electric-700);
  --svc-mkt-tint: var(--electric-100); --svc-mkt-wash: var(--electric-50);

  /* Counter-form: the hollow inside the hexagon and the spark at the centre
     of the marketing icon. Always set it to the surface behind the mark. */
  --mark-counter: var(--paper);

  /* Type */
  --font-display: "Bricolage Grotesque",system-ui,sans-serif;
  --font-body: "Sora",system-ui,sans-serif;

  /* Spacing — 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* Elevation — hard offsets, no blur */
  --sh-1: 2px 2px 0 var(--ink);
  --sh-2: 4px 4px 0 var(--ink);
  --sh-3: 6px 6px 0 var(--ink);
  --sh-4: 8px 8px 0 var(--ink);
  --sh-hover: 7px 7px 0 var(--ink);
  --sh-w: 4px 4px 0 var(--white);
  --sh-blue: 4px 4px 0 var(--electric);

  /* Borders */
  --bd: 2px solid var(--ink);
  --bd-hair: 1.5px solid var(--ink);
  --bd-w: 2px solid var(--white);

  --ease: cubic-bezier(.2,.7,.2,1);
  --maxw: 1160px;
  --container: 1160px;
}