/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: custom
 * vibe: "bright professional IT services, coral-rose accent, navy ink"
 * paper: oklch(99% 0.004 230) · ink: oklch(17% 0.012 240) · accent: oklch(56% 0.22 15)
 * display: Outfit 600-700 · body: DM Sans 400-500
 * paper-band: light · display-style: grotesk-sans · accent-hue: warm
 * nav: N5 Floating pill · footer: Ft5 Statement
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* Color tokens */
  --color-paper:        oklch(99%   0.004 230);
  --color-paper-2:      oklch(96%   0.006 230);
  --color-paper-3:      oklch(93%   0.008 230);
  --color-rule:         oklch(86%   0.007 230);
  --color-neutral:      oklch(62%   0.008 230);
  --color-muted:        oklch(48%   0.007 225);
  --color-ink:          oklch(17%   0.014 240);
  --color-ink-2:        oklch(28%   0.012 240);

  --color-dark-paper:   oklch(15%   0.014 240);
  --color-dark-paper-2: oklch(19%   0.016 240);
  --color-dark-rule:    oklch(28%   0.012 240);
  --color-dark-muted:   oklch(58%   0.008 230);
  --color-dark-ink:     oklch(94%   0.005 230);

  --color-accent:       oklch(56%   0.22  15);
  --color-accent-2:     oklch(65%   0.18  15);
  --color-accent-dark:  oklch(48%   0.20  15);
  --color-focus:        oklch(56%   0.22  15);

  /* Font tokens */
  --font-display:  'Outfit', system-ui, sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  /* Text scale */
  --text-display:   clamp(2.8rem, 5.5vw + 0.5rem, 5rem);
  --text-display-s: clamp(2rem,   3.5vw + 0.5rem, 3.2rem);
  --text-xl:        clamp(1.3rem, 2vw + 0.4rem,   1.75rem);
  --text-lg:        1.125rem;
  --text-base:      1rem;
  --text-sm:        0.875rem;
  --text-xs:        0.75rem;

  /* Spacing (4-pt scale) */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 9rem;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* Easings */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);

  /* Durations */
  --dur-fast:  150ms;
  --dur-base:  260ms;
  --dur-slow:  420ms;
  --dur-crawl: 650ms;

  /* Shadows */
  --shadow-sm:     0 1px 3px oklch(17% 0.014 240 / 0.08), 0 1px 2px oklch(17% 0.014 240 / 0.06);
  --shadow-md:     0 4px 16px oklch(17% 0.014 240 / 0.10), 0 2px 6px oklch(17% 0.014 240 / 0.06);
  --shadow-lg:     0 12px 40px oklch(17% 0.014 240 / 0.14), 0 4px 12px oklch(17% 0.014 240 / 0.08);
  --shadow-accent: 0 8px 24px oklch(56% 0.22 15 / 0.25);
}