/* ============================================================
   INKCREDIBLE STUDIOS — DESIGN SYSTEM TOKENS
   Premium / minimal / modern B2B artwork production service.
   Do not hardcode raw values in component CSS — reference these.
   ============================================================ */

:root {
  /* ---- Color: ink & paper ---- */
  --ink-navy: #14213D;        /* primary text, dark UI */
  --ink-navy-deep: #0B1220;   /* deepest navy — final CTA, footer */
  --ink-navy-soft: #2A3B63;   /* secondary dark, hovers on navy */
  --paper: #F4F5F7;           /* page background */
  --paper-raised: #EDEEF2;    /* subtle section band on paper */
  --white: #FFFFFF;           /* card surfaces */
  --slate: #6B7280;           /* secondary / supporting text */
  --slate-soft: #9AA1AC;      /* tertiary text, placeholders */
  --line: #E4E6EB;            /* hairline borders / dividers */
  --line-soft: #ECEDF1;

  /* ---- Color: accent (use strategically, not everywhere) ---- */
  --orange: #E8650A;          /* Inkcredible Orange — primary accent */
  --orange-dark: #C4530A;     /* hover/active state */
  --orange-soft: #FDECE0;     /* tint background for pills/badges */
  --orange-line: #F5C6A6;     /* tint border */

  /* ---- Type families ---- */
  --font-display: 'Instrument Sans', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-display: clamp(3.1rem, 5.6vw + 1rem, 6.5rem);   /* editorial hero headline */
  --fs-display-md: clamp(2.2rem, 3.2vw + 1rem, 3.6rem); /* section headlines: Why Inkcredible, Final CTA */
  --fs-hero: clamp(2.5rem, 4.6vw + 1rem, 4.5rem);
  --fs-h1: clamp(2.1rem, 3vw + 1rem, 3.25rem);
  --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --fs-body-lg: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radius ----
     Editorial direction uses restrained rounding — --radius-image for
     photography/collage tiles, --radius-pill reserved for functional
     controls (buttons, the mode switch), not decorative badges. */
  --radius-sm: 8px;
  --radius-image: 14px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-card: 0 1px 2px rgba(20, 33, 61, 0.04), 0 16px 40px -20px rgba(20, 33, 61, 0.16);
  --shadow-card-hover: 0 4px 10px rgba(20, 33, 61, 0.06), 0 24px 48px -18px rgba(20, 33, 61, 0.22);
  --shadow-pill: 0 6px 16px -6px rgba(232, 101, 10, 0.35);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 64px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}