/*
 * Tokens: the only file with raw colours, corner sizes and type sizes. Every other file reads these
 * variables, so a new look starts here. The layer order is declared once, here; each file wraps itself
 * in its layer (tokens, base, components, layout, pages, utilities), later layers win over earlier ones.
 */
@layer tokens, base, components, layout, pages, utilities;

@layer tokens {
    :root {
        color-scheme: light;

        /* Brand palette: vivid turquoise with a coral accent */
        --teal-950: #042a31;
        --teal-900: #063a44;
        --teal-700: #076b78;
        --teal-600: #087f8c;
        --teal-500: #0fa3b3;
        --teal-400: #25c7d6;
        --teal-100: #d3f4f7;
        --teal-50: #eefbfc;
        --coral-600: #e8452f;
        --coral-500: #ff6b55;
        --coral-400: #ff8a78;
        --coral-100: #ffe5e0;
        --sun-400: #ffc24b;
        --ink: #0d2b33;
        --white: #ffffff;

        /* Names the shared page styles use, mapped on the brand palette */
        --black: var(--teal-950);
        --panel: var(--teal-900);
        --gray-50: #f6fbfc;
        --gray-100: #eaf4f6;
        --gray-200: #d7e6ea;
        --gray-300: #bcd2d8;
        --gray-500: #4f6a72;
        --gray-700: #2f4a52;
        --blue: var(--teal-600);
        --blue-dark: var(--teal-700);
        --green: #14a76c;
        --green-dark: #0c7d4f;
        --red: #d6322b;
        --navy: var(--teal-900);

        /* Semantic colours: what a component means by a colour */
        --color-bg: #f6fbfc;
        --color-text: var(--ink);
        --color-text-muted: var(--gray-500);
        --color-surface: var(--white);
        --color-surface-alt: var(--teal-50);
        --color-border: var(--gray-200);
        --color-on-dark: var(--white);
        --color-link: var(--teal-600);
        --color-link-hover: var(--teal-700);
        --color-primary: var(--teal-600);
        --color-primary-strong: var(--teal-900);
        --color-accent: var(--coral-500);
        --color-accent-strong: var(--coral-600);
        --color-accent-soft: var(--coral-400);
        --color-success: var(--green-dark);
        --color-danger: var(--red);
        --color-media-bg: #000;
        --color-ink-deep: var(--teal-950);
        --color-glass-border: color-mix(in srgb, var(--white) 70%, transparent);
        --gradient-brand: linear-gradient(135deg, var(--teal-950), var(--teal-900) 45%, var(--teal-600));
        --gradient-primary: linear-gradient(135deg, var(--teal-600), var(--teal-700));
        --gradient-vivid: linear-gradient(135deg, var(--teal-500), var(--teal-400));
        --gradient-accent: linear-gradient(135deg, var(--coral-500), var(--sun-400));

        /* Status and brand colours used by single components */
        --color-whatsapp: #25d366;
        --color-whatsapp-hover: #1ebe5b;
        --color-star: #ffb400;
        --color-warning-bg: #fff4d6;
        --color-warning-text: #7a4a00;
        --color-warning-accent: #e09100;
        --color-notice-bg: #fff1ec;
        --color-notice-text: #9a3412;
        --color-danger-bg: #fde4e2;
        --color-danger-text: #991b1b;
        --color-danger-soft: #f6a5a0;

        /* Type */
        --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --text-xs: 0.8125rem;
        --text-sm: 0.9375rem;
        --text-md: 1rem;
        --text-lg: 1.125rem;
        --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
        --text-2xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
        --text-3xl: clamp(2rem, 1.4rem + 3vw, 3.75rem);

        /* Space */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3.5rem;
        --space-8: 5rem;
        --gutter: 1rem;

        /* Shape and depth: rounder and softer than the other themes, with tinted shadows */
        --radius-xs: 4px;
        --radius-sm: 14px;
        --radius: 18px;
        --radius-md: 18px;
        --radius-lg: 24px;
        --radius-xl: 32px;
        --radius-pill: 999px;
        --radius-round: 50%;
        --shadow-sm: 0 1px 2px rgba(6, 58, 68, 0.06), 0 2px 8px rgba(6, 58, 68, 0.05);
        --shadow: 0 10px 30px rgba(6, 58, 68, 0.12);
        --shadow-lg: 0 24px 60px rgba(4, 42, 49, 0.28);
        --shadow-glow: 0 8px 22px rgba(255, 107, 85, 0.4);

        /* Touch, chrome and motion */
        --tap: 48px;
        --header-h: 64px;
        --tabbar-h: 68px;
        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }


    /* Dark mode: the semantic colours flip, the brand palette stays. `--color-primary-strong` is the strong text
       colour (headings, prices), so it turns light; backgrounds that must stay dark use `--color-ink-deep`. */
    :root[data-theme="dark"] {
        color-scheme: dark;
        --black: #e6f6f8;
        --gray-50: #0c2228;
        --gray-100: #123139;
        --gray-200: #1f4750;
        --gray-300: #2c5c66;
        --gray-500: #8fb1b8;
        --gray-700: #b9d3d8;

        --color-bg: #07171b;
        --color-text: #e3f4f6;
        --color-text-muted: #8fb1b8;
        --color-surface: #0e262c;
        --color-surface-alt: #123139;
        --color-border: #1f4750;
        --color-link: var(--teal-400);
        --color-link-hover: #7fe0ea;
        --color-primary: var(--teal-500);
        --color-primary-strong: #e6f6f8;
        --color-success: #4ed19a;
        --color-media-bg: #000;
        --color-glass-border: color-mix(in srgb, var(--white) 14%, transparent);

        --color-warning-bg: #3a2c0a;
        --color-warning-text: #ffd98a;
        --color-notice-bg: #3a1f17;
        --color-notice-text: #ffb59a;
        --color-danger-bg: #3a1614;
        --color-danger-text: #ffb4ae;
        --color-danger-soft: #8a3a35;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
    }

    @media (min-width: 768px) {
        :root {
            --gutter: 1.5rem;
            --header-h: 76px;
        }
    }

    @media (min-width: 1200px) {
        :root {
            --gutter: 2rem;
        }
    }
}