/* ==========================================================================
   DESIGN TOKENS: v3
   International Online, restyled after the Pixso style reference
   (~/Downloads/DESIGN.md, pixso.net): near-monochrome gallery on a
   warm-white canvas, hairline borders, black Figtree type. Imagery
   carries the colour; chrome stays grayscale.

   The second half of this file maps the semantic token names used by
   styles.css and the pages' inline styles (inherited from v2) onto the
   new palette, so the markup did not need rewriting.
   ========================================================================== */

:root {
  /* ---- Reference palette ---- */
  --color-obsidian: #000000;
  --color-carbon: #121212;
  --color-graphite: #333333;
  --color-slate: #666666;
  --color-ash: #808080;
  --color-fog: #999999;
  --color-pebble: #8b8c8f;
  --color-smoke: #4d4d4d;
  --color-charcoal-veil: #3d3d3d;
  --color-dusk: #292929;
  --color-paper: #faf8fd;
  --color-bone: #f9f9fa;
  --color-mist: #eaebee;
  --color-ice-wash: #cfe7ed;

  /* Decorative-only accents (hero icon scatter). Never used on UI chrome. */
  --deco-pink: #ff7eb6;
  --deco-purple: #a77bff;
  --deco-blue: #4e8dff;
  --deco-green: #4cc38a;
  --deco-orange: #ff9f43;

  /* ---- Surfaces ---- */
  --surface-canvas: var(--color-paper);
  --surface-card: #ffffff;
  --surface-panel: var(--color-bone);
  --surface-cool-wash: var(--color-ice-wash);

  /* ---- Semantic tokens ---- */
  --color-bg: var(--surface-canvas);
  --color-bg-alt: var(--surface-canvas);   /* no alternating bands */
  --color-surface: var(--surface-card);
  --color-text: var(--color-graphite);
  --color-text-muted: var(--color-slate);
  --color-text-subtle: var(--color-ash);
  --color-heading: var(--color-obsidian);
  --color-border: var(--color-mist);
  --color-border-strong: var(--color-fog);
  --color-nav: var(--color-charcoal-veil);
  --color-brand-blue: #00a4e4;               /* logo "online" blue */
  --color-action: var(--color-brand-blue);   /* v4: primary actions in brand blue (v3 used Carbon) */
  --color-action-hover: #0090c8;

  /* v2 names still referenced by inline styles in the pages */
  --color-accent: var(--color-obsidian);
  --color-accent-strong: var(--color-obsidian);
  --color-accent-soft: var(--color-bone);

  /* ---- Typography ---- */
  --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-figtree);
  --font-body: var(--font-figtree);

  --text-caption: 12px;
  --text-meta: 13px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 30px;
  --text-heading-lg: 34px;
  --text-display: 48px;
  --text-display-lg: 60px;

  /* v2 scale names → reference scale */
  --text-xs: var(--text-meta);
  --text-sm: var(--text-body);
  --text-base: var(--text-body-lg);
  --text-md: var(--text-subheading);
  --text-lg: 20px;
  --text-xl: var(--text-heading-sm);
  --text-2xl: var(--text-heading);
  --text-3xl: var(--text-heading-lg);
  --text-4xl: var(--text-display);
  --text-5xl: var(--text-display-lg);

  --leading-display: 1.1;
  --leading-heading: 1.21;
  --leading-tight: 1.17;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

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

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

  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 10px;

  /* ---- Radius (8 / 12 / 18 only, never pill) ---- */
  --radius-sm: 6px;
  --radius-md: 8px;      /* nav, cards, inputs */
  --radius-lg: 8px;
  --radius-xl: 12px;     /* buttons, floating cards */
  --radius-2xl: 18px;    /* prominent product frames */
  --radius-full: 12px;   /* v2 pill name: deliberately not a pill */

  /* ---- Elevation: hairline + soft blur, never heavy or coloured ---- */
  --shadow-sm: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.4) 0px 0px 1px 0px;
  --shadow-md: rgba(0, 0, 0, 0.06) 0px 6px 16px -4px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 16px 32px -12px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 450ms var(--ease-out);

  /* ---- Layout ---- */
  --container-width: 1200px;
  --container-pad: clamp(16px, 4vw, 32px);
  --header-height: 92px;   /* v5: taller bar for the original stacked logo (was 68px with the compact v4 "iol" mark) */
  --z-header: 100;
  --z-dropdown: 110;
  --z-overlay: 120;

  /* ---- Canvas frame ---- */
  --rail-gutter: clamp(12px, 2.6vw, 32px);   /* rails' distance from the viewport edge */
  --rail-max: calc(var(--container-width) + var(--container-pad) * 2);
  --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Crect x='.5' y='.5' width='8' height='8' rx='1.5' fill='%23fff' stroke='%23eaebee'/%3E%3C/svg%3E");
  --dash: repeating-linear-gradient(90deg, #e3e4e7 0 6px, transparent 6px 12px);
  --hatch: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 8px);
  /* Brand-tinted hatches (v4): one light brand colour per strip; the colours
     are spread around the page via .hatch--blue / --green / --navy. */
  --hc-blue:  rgba(0, 164, 228, 0.2);
  --hc-green: rgba(141, 198, 63, 0.3);
  --hc-navy:  rgba(13, 53, 82, 0.13);
  --hatch-blue:  repeating-linear-gradient(-45deg, var(--hc-blue) 0 1px, transparent 1px 8px);
  --hatch-green: repeating-linear-gradient(-45deg, var(--hc-green) 0 1px, transparent 1px 8px);
  --hatch-navy:  repeating-linear-gradient(-45deg, var(--hc-navy) 0 1px, transparent 1px 8px);
}