/* ---------------------------------------------------------------
    ROW PALLETE
    design system contains 5 colors based on -
    backgrounds - #F8F7F4 (soft white)
    bg surfaces - #AEA99A (temple stone)
    text colors - #393026 (burned wood)
    primary acc - #CE8F45 (saffron gold)
    secondary a - #A0522D (terracotta)
--------------------------------------------------------------- */

:root {
    /* Spring Wood — warm page backgrounds */
    --palette-spring-wood-50: #f8f7f4;
    --palette-spring-wood-100: #efede5;
    --palette-spring-wood-200: #ddd8cb;
    --palette-spring-wood-300: #c8bfa9;
    --palette-spring-wood-400: #b1a286;
    --palette-spring-wood-500: #a18d6e;
    --palette-spring-wood-600: #947d62;
    --palette-spring-wood-700: #7b6653;
    --palette-spring-wood-800: #655447;
    --palette-spring-wood-900: #53463b;
    --palette-spring-wood-950: #2c241e;

    /* Napa — cool-neutral surfaces */
    --palette-napa-50: #fafbf8;
    --palette-napa-100: #f5f6f3;
    --palette-napa-200: #e9e7e2;
    --palette-napa-300: #d9d6ce;
    --palette-napa-400: #aea99a;
    --palette-napa-500: #7e7866;
    --palette-napa-600: #5c5a49;
    --palette-napa-700: #484638;
    --palette-napa-800: #2c2721;
    --palette-napa-900: #1f1c14;
    --palette-napa-950: #0e0c07;

    /* Birch — text tones */
    --palette-birch-50: #f6f5f0;
    --palette-birch-100: #e8e6da;
    --palette-birch-200: #d3cfb8;
    --palette-birch-300: #b9b190;
    --palette-birch-400: #a3986f;
    --palette-birch-500: #91845d;
    --palette-birch-600: #7a6c4d;
    --palette-birch-700: #61553f;
    --palette-birch-800: #534838;
    --palette-birch-900: #483f34;
    --palette-birch-950: #393026;

    /* Brandy Punch — primary accent (amber-gold) */
    --palette-brandy-50: #faf5ec;
    --palette-brandy-100: #f2e6cf;
    --palette-brandy-200: #e7cca1;
    --palette-brandy-300: #d9ab6b;
    --palette-brandy-400: #ce8f45;
    --palette-brandy-500: #be7934;
    --palette-brandy-600: #a35d2b;
    --palette-brandy-700: #834425;
    --palette-brandy-800: #6e3925;
    --palette-brandy-900: #5e3125;
    --palette-brandy-950: #361812;

    /* Paarl — secondary accent (warm sienna) */
    --palette-paarl-50: #fbf7ef;
    --palette-paarl-100: #f4e9d1;
    --palette-paarl-200: #e7d1a0;
    --palette-paarl-300: #dbb56e;
    --palette-paarl-400: #d29e4d;
    --palette-paarl-500: #c98337;
    --palette-paarl-600: #b1662e;
    --palette-paarl-700: #a0522d;
    --palette-paarl-800: #793d27;
    --palette-paarl-900: #643323;
    --palette-paarl-950: #381910;

    /* Neutral */
    --palette-white: #ffffff;
    --palette-black: #000000;
}

/* ---------------------------------------------------------------
    SEMANTIC COLOR TOKENS
--------------------------------------------------------------- */

:root {
    /* Brand */
    --color-primary: var(--palette-brandy-400);
    --color-primary-hover: var(--palette-brandy-500);
    --color-secondary: var(--palette-paarl-700);
    --color-secondary-hover: var(--palette-paarl-800);

    /* Backgrounds (light → dark) */
    --bg-base: var(--palette-spring-wood-50);
    --bg-surface: var(--palette-napa-100);
    --bg-elevated: var(--palette-napa-200);
    --bg-overlay: var(--palette-napa-400);

    /* Text */
    --text-base: var(--palette-birch-950);
    --text-muted: var(--palette-birch-600);
    --text-subtle: var(--palette-birch-500);
    --text-inverse: var(--palette-spring-wood-50);
    --text-primary: var(--palette-brandy-700);

    /* Borders */
    --border-surface: var(--palette-napa-200);
    --border-elevated: var(--palette-napa-300);
    --border-overlay: var(--palette-napa-500);
    --border-primary: var(--palette-brandy-400);

    /* Transparent Mixtures */
    --text-inverse-75: color-mix(in srgb, var(--text-inverse) 75%, transparent);
}

/* ---------------------------------------------------------------
    TYPOGRAPHY TOKENS
    scoped to [data-lang], default is english.
    font-sizes for sinhala is created using the below theory

    ((en font size * en line height) / si line height)/16 rem
--------------------------------------------------------------- */

/* English (default) */
:root,
:root[data-lang="en"] {
    --font-body: "Lato", sans-serif;
    --font-display: "Cormorant Garamond", serif;

    /* 10px */
    --text-2xs: 0.625rem;
    /* 12px */
    --text-xs: 0.75rem;
    /* 14px */
    --text-sm: 0.875rem;
    /* 16px */
    --text-reg: 1rem;
    /* 20px */
    --text-lg: 1.25rem;
    /* 28px */
    --text-xl: 1.75rem;
    /* 32px */
    --text-2xl: 2rem;
    /* 40px */
    --text-3xl: 2.5rem;
    /* 50px */
    --text-4xl: 3.5rem;

    --leading-body: 1.7;
    --leading-display: 1.3;

    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.15em;
    --tracking-wider: 0.25em;
    --tracking-widest: 0.35em;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
}

/* Sinhala overrides */
:root[data-lang="si"] {
    --font-body: "Noto Sans Sinhala", sans-serif;
    --font-display: "Noto Serif Sinhala", serif;

    /* 8.5px */
    --text-2xs: 0.625rem;
    /* 10.19px */
    --text-xs: 0.75rem;
    /* 11.9px */
    --text-sm: 0.8rem;
    /* 13.6px */
    --text-reg: 0.85rem;
    /* 16.25px */
    --text-lg: 1.016rem;
    /* 22.74px */
    --text-xl: 1.422rem;
    /* 26px */
    --text-2xl: 1.625rem;
    /* 32.5px */
    --text-3xl: 2.031rem;
    /* 45.5px */
    --text-4xl: 2.844rem;

    --leading-body: 2;
    --leading-display: 1.6;
}

/* ---------------------------------------------------------------
    SPACING, RADIUS, LAYOUT, MOTION TOKENS
--------------------------------------------------------------- */
:root {
    /* Spacing — 4px base grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Semantic spacing aliases */
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-4);
    --gap-lg: var(--space-6);
    --gap-xl: var(--space-8);
    --gap-2xl: var(--space-12);

    --section-block-padding: var(--space-24);
    --section-inline-padding: var(--space-6);
    --section-divider-gap: var(--space-16);
    --section-title-gap: var(--space-6);


    --para-margin-bottom: var(--space-6);

    /* Border radius — complete scale, no gaps */
    /* 2px  */
    --radius-xs: 0.125rem;
    /* 4px  */
    --radius-sm: 0.25rem;
    /* 6px  */
    --radius-md: 0.375rem;
    /* 8px  */
    --radius-lg: 0.5rem;
    /* 12px  */
    --radius-xl: 0.75rem;
    /* 16px */
    --radius-2xl: 1rem;
    /* 24px */
    --radius-3xl: 1.5rem;
    /* full */
    --radius-full: 9999px;

    /* z index */
    --z-surface: 100;
    --z-header: 200;

    /* Char based widths */
    --max-char-narrow: 25ch;
    --max-char-medium: 35ch;
    --max-char-wide: 50ch;

    /* Container max width */
    /* 1280px */
    --max-w-container: 80rem;
    /* 800px */
    --max-w-narrow: 50rem;
    /* 1040px */
    --max-w-medium: 65rem;
    /* 1440px */
    --max-w-wide: 90rem;
    /* 1680px */
    --max-w-widest: 105rem;

    /* Motion */
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --ease-base: ease;
    --ease-out: ease-out;
    --transition-base: var(--duration-base) var(--ease-base);
    --transition-fast: var(--duration-fast) var(--ease-base);

    @media (max-width: 768px) {
        --section-block-padding: var(--space-12);
        --mobile-header-height: 55px;
    }
}