/* ==========================================================================
   Project Carnation — Design tokens
   The single source of raw values. Everything else references these.
   Breakpoints (media queries cannot read custom properties):
     mobile  < 768px   (max-width: 767.98px)
     tablet  768–1199px (min-width: 768px)
     desktop 1200px+   (min-width: 1200px)
   The homepage hero also switches to two columns at 1024px
   (min-width: 1024px), matching the design reference's `lg` breakpoint.
   ========================================================================== */

:root {
    /* ---- Palette (raw) ------------------------------------------------- */
    --palette-forest: #173F35;          /* Academic Forest Green */
    --palette-forest-deep: #102B24;     /* Deep Forest */
    --palette-bronze: #A98555;          /* Antique Bronze — accents/keylines, not small text (≈3:1 on ivory) */
    --palette-bronze-deep: #78592D;     /* Deep Bronze — text-safe accent (≈6:1 on ivory) */
    --palette-teal: #397D79;            /* Medical Teal */
    --palette-charcoal: #343632;        /* Warm Charcoal */
    --palette-ivory: #FAF8F5;           /* Warm Ivory / Natural Parchment */
    --palette-white: #FFFFFF;           /* Raised White */
    --palette-cream: #F4EFEA;           /* Recessed Cream */
    --palette-sand: #EAE3D9;            /* Muted Warm Sand */
    --palette-bone: #DED5C8;            /* Bone Keyline */
    --palette-stone: #686A64;           /* Subdued Text */
    --palette-amber: #C47D3B;           /* Status Amber */
    --palette-crimson: #943834;         /* Status Crimson */

    /* ---- Semantic colour ----------------------------------------------- */
    --color-primary: var(--palette-forest);
    --color-primary-hover: var(--palette-forest-deep);
    --color-on-primary: var(--palette-ivory);
    --color-secondary: var(--palette-bronze);
    --color-tertiary: var(--palette-teal);

    --color-text: var(--palette-charcoal);
    --color-text-muted: var(--palette-stone);
    --color-text-heading: var(--palette-forest);
    --color-text-accent: var(--palette-bronze-deep);
    --color-link: var(--palette-forest);
    --color-link-hover: var(--palette-forest-deep);

    --color-surface: var(--palette-ivory);
    --color-surface-raised: var(--palette-white);
    --color-surface-recessed: var(--palette-cream);
    --color-surface-muted: var(--palette-sand);

    --color-border: var(--palette-bone);
    --color-border-subtle: var(--palette-sand);   /* inner dividers within raised cards */
    --color-border-strong: var(--palette-forest);
    --color-accent-rule: var(--palette-bronze);

    --color-warning: var(--palette-amber);
    --color-danger: var(--palette-crimson);

    --color-focus-ring: var(--palette-forest);
    --color-selection: var(--palette-sand);

    /* ---- Typography: families ------------------------------------------ */
    /* Production font assets are not yet configured; fallbacks apply until they are. */
    --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif;
    --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---- Typography: scale (size / line-height / weight / tracking) ---- */
    /* Display: the homepage hero headline. 48px by default, 52px on desktop, 34px on mobile. */
    --text-display-size: 3rem;            /* 48px */
    --text-display-leading: 3.5rem;       /* 56px */
    --text-display-weight: 600;
    --text-display-tracking: -0.02em;

    --text-headline-2xl-size: 3rem;       /* 48px */
    --text-headline-2xl-leading: 3.5rem;  /* 56px */
    --text-headline-2xl-weight: 600;
    --text-headline-2xl-tracking: -0.02em;

    --text-headline-xl-size: 2.25rem;     /* 36px */
    --text-headline-xl-leading: 2.75rem;  /* 44px */
    --text-headline-xl-weight: 600;
    --text-headline-xl-tracking: -0.015em;

    --text-headline-lg-size: 1.75rem;     /* 28px */
    --text-headline-lg-leading: 2.25rem;  /* 36px */
    --text-headline-lg-weight: 600;
    --text-headline-lg-tracking: -0.01em;

    --text-headline-md-size: 1.375rem;    /* 22px */
    --text-headline-md-leading: 1.875rem; /* 30px */
    --text-headline-md-weight: 500;
    --text-headline-md-tracking: -0.005em;

    --text-headline-sm-size: 1.125rem;    /* 18px */
    --text-headline-sm-leading: 1.625rem; /* 26px */
    --text-headline-sm-weight: 500;
    --text-headline-sm-tracking: 0;

    --text-body-lg-size: 1.0625rem;       /* 17px */
    --text-body-lg-leading: 1.75rem;      /* 28px */
    --text-body-md-size: 0.9375rem;       /* 15px */
    --text-body-md-leading: 1.5rem;       /* 24px */
    --text-body-sm-size: 0.8125rem;       /* 13px */
    --text-body-sm-leading: 1.25rem;      /* 20px */
    --text-body-weight: 400;

    --text-label-md-size: 0.8125rem;      /* 13px */
    --text-label-md-leading: 1.125rem;    /* 18px */
    --text-label-md-tracking: 0.02em;
    --text-label-sm-size: 0.6875rem;      /* 11px */
    --text-label-sm-leading: 1rem;        /* 16px */
    --text-label-sm-tracking: 0.08em;     /* expanded — used for small uppercase labels */
    --text-label-weight: 600;

    --text-caption-size: 0.75rem;         /* 12px */
    --text-caption-leading: 1rem;         /* 16px */
    --text-caption-weight: 400;

    /* ---- Spacing (8pt-oriented) ---------------------------------------- */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2.5rem;    /* 40px */
    --space-2xl: 4rem;     /* 64px — section rhythm */
    --space-3xl: 6rem;     /* 96px — section rhythm */

    /* ---- Shape --------------------------------------------------------- */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;           /* device screen (product illustrations) */
    --radius-3xl: 1.5rem;         /* device shell (product illustrations) */

    --border-width: 1px;
    --keyline: var(--border-width) solid var(--color-border);

    /* ---- Elevation — genuine overlays only (menus, dialogs, popovers) --- */
    --shadow-overlay: 0 8px 32px -4px rgba(23, 63, 53, 0.07);
    /* Product illustrations only (hero device mockups), per design reference */
    --shadow-product: 0 16px 40px -8px rgba(23, 63, 53, 0.08);
    --shadow-device: 0 24px 48px -12px rgba(23, 63, 53, 0.18);

    /* ---- Focus --------------------------------------------------------- */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* ---- Layout -------------------------------------------------------- */
    --container-max: 80rem;       /* 1280px */
    --measure: 45rem;             /* ~720px readable narrative width */
    --grid-columns: 4;
    --page-margin: 1rem;
    --grid-gutter: 1rem;
    --header-height: 4.25rem;     /* site header bar; also offsets in-page anchor scrolling */

    /* ---- Brand (header mark + wordmark) -------------------------------- */
    --brand-mark-size: 2.5rem;            /* 40px mark height */
    --brand-mark-size-sm: 2.125rem;       /* 34px below 360px */
    --brand-wordmark-tracking: 0.22em;
    --brand-wordmark-tracking-sm: 0.16em; /* below 360px */

    /* ---- Motion -------------------------------------------------------- */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Tablet: 8 columns, 2rem margin, 1.5rem gutters */
@media (min-width: 768px) {
    :root {
        --grid-columns: 8;
        --page-margin: 2rem;
        --grid-gutter: 1.5rem;
    }
}

/* Desktop: 12 columns, 3rem margin, 1.5rem gutters */
@media (min-width: 1200px) {
    :root {
        --grid-columns: 12;
        --page-margin: 3rem;
        --text-display-size: 3.25rem;     /* 52px */
        --text-display-leading: 3.75rem;  /* 60px */
    }
}

/* Mobile headline overrides */
@media (max-width: 767.98px) {
    :root {
        --text-headline-2xl-size: 2.125rem;   /* 34px */
        --text-headline-2xl-leading: 2.625rem; /* 42px */
        --text-headline-2xl-tracking: -0.015em;
        --text-headline-xl-size: 1.75rem;     /* 28px */
        --text-headline-xl-leading: 2.25rem;  /* 36px */
        --text-headline-xl-tracking: -0.01em;
        --text-display-size: 2.125rem;        /* 34px */
        --text-display-leading: 2.625rem;     /* 42px */
        --text-display-tracking: -0.015em;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
    }
}