/* Appily Ninetyfive — Harborline Modern tokens
   Cool harbor teal · weathered steel · signal coral · Space Grotesk + Source Serif 4 */

:root {
  --color-primary: #0B4F6C;
  --color-primary-hover: #083D54;
  --color-secondary: #455A5D;
  --color-secondary-hover: #36484A;
  --color-accent: #D94A3F;
  --color-accent-hover: #B83A32;
  --color-bg: #F2F5F7;
  --color-bg-deep: #E4EAEF;
  --color-surface: #FFFFFF;
  --color-text: #1A2332;
  --color-text-muted: #3F4A56;
  --color-border: #C5D0D6;
  --color-border-strong: #9AADB8;
  --color-on-primary: #F2F5F7;
  --color-on-accent: #FFFFFF;
  --color-success: #2F6B5A;
  --color-danger: #B33A2B;
  --color-focus: #0B4F6C;

  --a95-harbor: var(--color-primary);
  --a95-steel: var(--color-secondary);
  --a95-coral: var(--color-accent);
  --a95-mist: var(--color-bg);
  --a95-deck: var(--color-surface);
  --a95-ink: var(--color-text);
  --a95-line: var(--color-border);
  --a95-muted: var(--color-text-muted);

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-ui: "Space Grotesk", "Segoe UI", sans-serif;

  /* Type scale (locked by index.php) */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 body */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.375rem;    /* 22 = h3 */
  --text-xl: 1.75rem;     /* 28 */
  --text-h2: 2rem;        /* 32 = h2 */
  --text-h1: 3rem;        /* 48 = h1 */
  --text-2xl: clamp(2.25rem, 4.5vw, 3rem);
  --text-3xl: clamp(2.75rem, 6vw, 4.5rem);
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing scale: 8px base → 8/16/24/32/48/64/96 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-page: clamp(16px, 4vw, 32px);
  --space-section: clamp(48px, 8vw, 96px);

  --radius: 3px;
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 3px;

  --shadow: 0 14px 36px rgba(11, 79, 108, 0.10);
  --shadow-deep: 0 18px 44px rgba(11, 79, 108, 0.16);
  --shadow-none: none;

  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-link: 280ms var(--ease-out-expo);
  --motion-btn: 200ms ease-out;
  --motion-media: 400ms var(--ease-out-soft);

  --nav-h: 4.25rem;
  --dock-max: 1180px;
  --rule: 1px solid var(--color-border);
  --grid: 8px;

  /* Aliases so legacy a36 page CSS resolves against Harborline tokens */
  --a36-teal: var(--color-primary);
  --a36-teal-dark: var(--color-primary-hover);
  --a36-mango: var(--color-accent);
  --a36-mango-dark: var(--color-accent-hover);
  --a36-berry: var(--color-accent);
  --a36-purple: var(--color-secondary);
  --a36-mint: var(--color-success);
  --a36-cream: var(--color-bg);
  --a36-warm: var(--color-bg-deep);
  --a36-ink: var(--color-text);
  --a36-muted: var(--color-text-muted);
  --a36-border: var(--color-border);
  --a36-gold: var(--color-accent);
  --a36-white: var(--color-surface);
  --a36-shadow: var(--shadow);
  --a36-radius: var(--radius);
  --a36-radius-lg: var(--radius);
  --font-display-a36: var(--font-display);
  --font-body-a36: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-link: 0.01ms;
    --motion-btn: 0.01ms;
    --motion-media: 0.01ms;
  }
}