/* YUKI HEALTH - Design tokens
   Single source for colour, type, spacing, shape and layout.
   Brand orange is sampled from the logo artwork (#FC4201). Darker steps of the
   same hue are used wherever white text sits on orange or orange text is small,
   so contrast stays at WCAG AA. */

:root {
    /* Brand */
    --color-brand: #FC4201;          /* logo orange: marks, icons, large display, borders */
    --color-brand-strong: #D63600;   /* button fill under white text (4.8:1) */
    --color-brand-hover: #B82E00;    /* hover/pressed */
    --color-brand-ink: #C93300;      /* small orange text and links on light backgrounds (5.2:1) */
    --color-brand-soft: #FFEDE4;     /* tinted surfaces, badges */
    --color-brand-tint: rgba(252, 66, 1, 0.08);

    /* Neutrals */
    --color-bg: #FFFBF6;             /* warm white page */
    --color-ivory: #FBF4EA;          /* alternate section */
    --color-surface: #FFFFFF;        /* cards */
    --color-text: #2E2826;           /* charcoal: body and headings */
    --color-text-muted: #6B605A;     /* secondary text (5.9:1 on warm white) */
    --color-line: #EDE3D6;           /* borders, dividers */
    --color-dark: #2E2826;           /* dark bands (footer) */
    --color-on-dark: #F3ECE6;
    --color-on-dark-muted: #CDBFB5;

    /* Health tool status colours (results only, not decoration) */
    --color-status-good: #2E7D32;
    --color-status-caution: #B26A00;
    --color-status-alert: #C62828;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Tamil', sans-serif;
    --text-xs: 0.8125rem;   /* 13px */
    --text-sm: 0.9375rem;   /* 15px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.375rem;    /* 22px */
    --text-2xl: clamp(1.625rem, 3.2vw, 2.125rem);
    --text-3xl: clamp(2rem, 5vw, 3rem);
    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Spacing (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-y: clamp(3rem, 7vw, 5rem);

    /* Shape and depth */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(46, 40, 38, 0.06);
    --shadow-md: 0 6px 20px rgba(46, 40, 38, 0.08);
    --shadow-lg: 0 14px 40px rgba(46, 40, 38, 0.12);
    --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-brand-strong);

    /* Layout */
    --content-max: 1160px;
    --text-max: 68ch;
    --gutter: clamp(1rem, 4vw, 1.5rem);
    --header-h: 64px;
    --action-bar-h: 64px;

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.2s;
}

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