/*
 * 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: Modernize navy with a red accent (same values as the Seferya panel and vittaxi.com) */
        --navy-950: #060d22;
        --navy-900: #0b1736;
        --navy-800: #14224b;
        --navy-700: #1d3062;
        --navy-600: #2a4079;
        --navy-500: #3c5694;
        --navy-400: #5f78b3;
        --navy-100: #dfe6f3;
        --navy-50: #f1f4fa;
        --brand-700: #a51a27;
        --brand-600: #c8202f;
        --brand-500: #e0303f;
        --brand-100: #ffe0e3;
        --ink: #0b1736;
        --white: #ffffff;

        /* Names the shared page styles use, mapped on the brand palette */
        --black: var(--navy-950);
        --panel: var(--navy-900);
        --gray-50: #f8fafc;
        --gray-100: #f1f5f9;
        --gray-200: #dfe6f3;
        --gray-300: #b9c6e2;
        --gray-500: #5b6478;
        --gray-700: #334155;
        --blue: var(--navy-800);
        --blue-dark: var(--navy-900);
        --green: #14a76c;
        --green-dark: #0c7d4f;
        --red: #d6322b;
        --navy: var(--navy-900);

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

        /* 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: "Inter", 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(11, 23, 54, 0.06), 0 2px 8px rgba(11, 23, 54, 0.05);
        --shadow: 0 10px 30px rgba(11, 23, 54, 0.12);
        --shadow-lg: 0 24px 60px rgba(6, 13, 34, 0.28);
        --shadow-glow: 0 8px 22px rgba(200, 32, 47, 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: #e8edf8;
        --gray-50: #0e1a3a;
        --gray-100: #14224b;
        --gray-200: #2a4079;
        --gray-300: #3c5694;
        --gray-500: #9fb0d6;
        --gray-700: #c5d0ea;

        --color-bg: #060d22;
        --color-text: #e8edf8;
        --color-text-muted: #9fb0d6;
        --color-surface: #0b1736;
        --color-surface-alt: #14224b;
        --color-border: #2a4079;
        --color-link: var(--navy-400);
        --color-link-hover: #a9bcea;
        --color-primary: var(--navy-500);
        --color-primary-strong: #e8edf8;
        --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;
        }
    }
}