/* Holy Smocks — design tokens (Manifesto / landing-c winner) */

@font-face {
  font-family: 'Playlist Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('../public/fonts/playlist-script.woff2') format('woff2'),
    url('../public/fonts/playlist-script.woff') format('woff');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('../public/fonts/caveat-latin-400-normal.woff2') format('woff2'),
    url('../public/fonts/caveat-latin-400-normal.woff') format('woff');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url('../public/fonts/caveat-latin-600-normal.woff2') format('woff2'),
    url('../public/fonts/caveat-latin-600-normal.woff') format('woff');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url('../public/fonts/caveat-latin-700-normal.woff2') format('woff2'),
    url('../public/fonts/caveat-latin-700-normal.woff') format('woff');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    url('../public/fonts/dm-sans-latin-300-normal.woff2') format('woff2'),
    url('../public/fonts/dm-sans-latin-300-normal.woff') format('woff');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('../public/fonts/dm-sans-latin-400-normal.woff2') format('woff2'),
    url('../public/fonts/dm-sans-latin-400-normal.woff') format('woff');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    url('../public/fonts/dm-sans-latin-500-normal.woff2') format('woff2'),
    url('../public/fonts/dm-sans-latin-500-normal.woff') format('woff');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url('../public/fonts/dm-sans-latin-700-normal.woff2') format('woff2'),
    url('../public/fonts/dm-sans-latin-700-normal.woff') format('woff');
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
    url('../public/fonts/dm-sans-latin-400-italic.woff2') format('woff2'),
    url('../public/fonts/dm-sans-latin-400-italic.woff') format('woff');
}

:root {
  /* Brand palette */
  --color-red: #ae220b;
  --color-orange: #f17d06;
  --color-yellow: #fbcd08;
  --color-green: #3b5f0c;
  --color-blue: #1c3062;

  --color-primary: var(--color-blue);
  --color-primary-rgb: 28 48 98;
  --color-secondary: var(--color-orange);
  --color-bg: #f4f7fa;
  --color-accent: var(--color-green);
  --color-white: #ffffff;
  --color-ink: #1a1a2e;

  --color-primary-dark: color-mix(in srgb, var(--color-blue) 82%, #000000);
  --color-secondary-hover: color-mix(in srgb, var(--color-orange) 82%, var(--color-red));
  --color-accent-on-dark: var(--color-yellow);
  --color-accent-on-light: var(--color-green);
  --color-ink-muted: #3a3a4a;
  --color-ink-subtle: #5a5a6e;

  --surface-page: var(--color-bg);
  --surface-default: var(--color-white);
  --surface-primary: var(--color-primary);
  --surface-secondary: var(--color-secondary);
  --surface-inverse: var(--color-ink);
  --color-surface: #ffffff;
  --gutter-bg: #f4f7fa;

  --text-default: var(--color-ink);
  --text-muted: var(--color-ink-muted);
  --text-subtle: var(--color-ink-subtle);
  --text-on-primary: var(--color-white);
  --text-on-primary-muted: rgba(255, 255, 255, 0.88);
  --text-on-primary-subtle: rgba(255, 255, 255, 0.7);
  --text-on-inverse: rgba(255, 255, 255, 0.75);
  --text-on-inverse-strong: var(--color-white);
  --text-accent-on-dark: var(--color-accent-on-dark);
  --text-accent-on-light: var(--color-accent-on-light);
  --text-brand: var(--color-primary);
  --text-emphasis: var(--color-red);

  --link-default: var(--color-secondary);
  --link-default-hover: var(--color-secondary-hover);
  --link-underline-offset: 2px;

  --border-default: rgb(var(--color-primary-rgb) / 0.12);
  --border-strong: rgb(var(--color-primary-rgb) / 0.2);
  --border-on-primary: rgba(255, 255, 255, 0.15);
  --border-brand: var(--color-primary);

  --font-display: 'Playlist Script', cursive;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: 1.1rem;
  --text-xl: 1.6rem;

  --display-sm: clamp(2.25rem, 5vw, 3.75rem);
  --display-md: clamp(2.5rem, 6vw, 5rem);
  --display-lg: clamp(3.5rem, 9vw, 7.5rem);

  --line-height-tight: 0.92;
  --line-height-snug: 1.1;
  --line-height-body: 1.7;
  --line-height-relaxed: 1.8;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --radius-md: 4px;
  --photo-radius: 0.75rem;
  --photo-shadow: 0 16px 40px rgb(0 0 0 / 0.16), 0 6px 16px rgb(0 0 0 / 0.08);
  --radius-pill: 999px;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 5rem;
  --space-section-y: clamp(5rem, 10vw, 8rem);

  --layout-max: 1100px;
  --layout-narrow: 760px;
  --layout-gutter: clamp(1rem, 4vw, 3rem);
  --layout-content-inset: calc(
    var(--layout-gutter) + max(0px, (100vw - 2 * var(--layout-gutter) - var(--layout-max)) / 2)
  );
  --content-padding-x: var(--layout-gutter);

  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --focus-ring-color: var(--color-yellow);
  --focus-ring-color-on-dark: var(--color-accent-on-dark);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;

  --z-skip: 9999;
  --z-nav: 200;
  --nav-height: 5.5rem;
  --nav-collapse: 75rem;

  --glass-blur: blur(20px) saturate(180%);
  --glass-bg-dark: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.22) 0%,
    rgb(255 255 255 / 0.06) 48%,
    rgb(var(--color-primary-rgb) / 0.18) 100%
  );
  --glass-bg-light: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.78) 0%,
    rgb(255 255 255 / 0.52) 100%
  );
  --glass-border-dark: rgb(255 255 255 / 0.28);
  --glass-border-light: rgb(255 255 255 / 0.72);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.45);
  --glass-shadow-dark: 0 8px 32px rgb(0 0 0 / 0.12);
  --glass-shadow-light: 0 8px 32px rgb(var(--color-primary-rgb) / 0.1);
}