/* Crewnify: Color tokens
   Base palette from DESIGN.md, exposed as CSS custom properties.
   The brand runs a single dark theme (near-black neutral + deep violet)
   there is no light mode in the source. */
:root {
  /* ---- Neutral scale (0 = white → 7 = near-black) ---- */
  --color-neutral-0: #FFFFFF;
  --color-neutral-1: #F2F2F2;
  --color-neutral-2: #D8D8D9;
  --color-neutral-3: #B2B2B3;
  --color-neutral-4: #808081;
  --color-neutral-5: #4D4D4E;
  --color-neutral-6: #1A1A1C;
  --color-neutral-7: #010103;
  --color-white: #FFFFFF;

  /* translucent white steps, used for hairline borders / hover washes on dark surfaces */
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 40%);

  /* ---- Violet: primary brand chromatic ---- */
  --color-violet-1: #E6E6EA;
  --color-violet-2: #CECED6;
  --color-violet-3: #545370;
  --color-violet-4: #0C0A33;
  --color-violet-5: #090828;
  --color-violet-6: #040414;
  --color-violet-7: #03030F;

  /* ---- Apple Blossom: secondary chromatic (muted red) ---- */
  --color-blossom-1: #F6EBEB;
  --color-blossom-2: #EDD8D8;
  --color-blossom-3: #C07777;
  --color-blossom-4: #A53E3E;
  --color-blossom-5: #843131;
  --color-blossom-6: #421818;
  --color-blossom-7: #311212;

  /* ---- Chateau Green: tertiary chromatic ---- */
  --color-green-1: #EBF6F0;
  --color-green-2: #D8EDE1;
  --color-green-3: #77C096;
  --color-green-4: #3EA56A;
  --color-green-5: #318454;
  --color-green-6: #18422A;
  --color-green-7: #12311F;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--color-violet-4);        /* primary section background */
  --surface-page-alt: var(--color-neutral-6);   /* alternate near-black section background */
  --surface-card: var(--color-violet-4);
  --surface-overlay: color-mix(in srgb, var(--color-neutral-7), transparent 10%);

  --text-primary: var(--color-white);
  --text-secondary: var(--color-white-60);
  --text-tertiary: var(--color-white-40);

  --border-hairline: var(--color-white-20);
  --border-hairline-soft: var(--color-white-15);

  --accent: var(--color-white);       /* buttons/CTAs are white-on-dark, not colored */
  --brand-violet: var(--color-violet-4);
  --brand-blossom: var(--color-blossom-4);
  --brand-green: var(--color-green-4);

  --btn-primary-bg: var(--color-white);
  --btn-primary-bg-hover: var(--color-neutral-2);
  --btn-primary-text: var(--color-neutral-7);
  --btn-secondary-border: var(--color-white-15);
  --btn-secondary-text: var(--color-white);
}
/* Crewnify: Spacing, radius, border, section-rhythm tokens */
:root {
  /* Radii: source values, not snapped to a 4/8 grid */
  --radius-button: 0.75rem;   /* 12px */
  --radius-input: 0.75rem;    /* 12px */
  --radius-badge: 0.75rem;    /* 12px */
  --radius-tag: 0.375rem;     /* 6px, DESIGN.md tagRadius */
  --radius-card: 1rem;        /* 16px */
  --radius-image: 1rem;       /* 16px */
  --radius-checkbox: 0.25rem; /* 4px */
  --radius-full: 999px;

  /* Border widths */
  --border-width-card: 1px;
  --border-width-divider: 1px;

  /* Section rhythm: vertical section padding scales up per breakpoint */
  --space-section-py-mobile: 4rem;   /* 64px, py-16 */
  --space-section-py-tablet: 6rem;   /* 96px, py-24 */
  --space-section-py-desktop: 7rem;  /* 112px, py-28 */
  --space-section-px: 5%;

  /* Container */
  --container-max: 80rem; /* 1280px, container-xxl */
  --container-gutter: 5%;

  /* Base spacing scale used across gaps/margins in the source components */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
}
/* Crewnify: Type tokens. One family (Urbanist) for both display and body;
   weight is what differentiates heading (500) from body (400). */
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Urbanist", sans-serif;
  --font-body: "Urbanist", sans-serif;
  --font-weight-heading: 500;
  --font-weight-body: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Desktop (≥992px) sizes: DESIGN.md "desktop" scale */
  --text-h1: 5.25rem;   /* 84px */
  --text-h2: 3.75rem;   /* 60px */
  --text-h3: 3rem;      /* 48px */
  --text-h4: 2.5rem;    /* 40px */
  --text-h5: 2rem;      /* 32px */
  --text-h6: 1.625rem;  /* 26px */
  --text-large: 1.625rem;   /* 26px */
  --text-medium: 1.25rem;   /* 20px */
  --text-regular: 1.125rem; /* 18px */
  --text-small: 1rem;       /* 16px */
  --text-tiny: 0.75rem;     /* 12px */

  --leading-heading: 1.2;
  --leading-h1: 1.1;
  --leading-body: 1.6;
  --tracking-heading: 0.01em;
}

/* Mobile (<992px) sizes: DESIGN.md "mobile" scale */
@media (max-width: 991px) {
  :root {
    --text-h1: 3rem;      /* 48px */
    --text-h2: 2.75rem;   /* 44px */
    --text-h3: 2rem;      /* 32px */
    --text-h4: 1.5rem;    /* 24px */
    --text-h5: 1.25rem;   /* 20px */
    --text-h6: 1.125rem;  /* 18px */
    --text-large: 1.125rem;
    --text-medium: 1rem;
    --text-regular: 0.875rem;
    --text-small: 0.75rem;
    --text-tiny: 0.625rem;
  }
}