/* ============================================
   Design Tokens — Swipetify
   ============================================ */

/* ── @font-face — Degular ── */
@font-face {
    font-family: "Degular";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/degular-regular.woff2") format("woff2");
    descent-override: 40%;
}
@font-face {
    font-family: "Degular";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("/fonts/degular-regular-italic.woff2") format("woff2");
    descent-override: 40%;
}
@font-face {
    font-family: "Degular";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/degular-semibold.woff2") format("woff2");
    descent-override: 40%;
}
@font-face {
    font-family: "Degular";
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    src: url("/fonts/degular-semibold-italic.woff2") format("woff2");
    descent-override: 40%;
}
@font-face {
    font-family: "Degular";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/degular-bold.woff2") format("woff2");
    descent-override: 40%;
}
@font-face {
    font-family: "Degular";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url("/fonts/degular-bold-italic.woff2") format("woff2");
    descent-override: 40%;
}

:root {
    /* ── Typography — Degular system (from Watts Pet) ── */
    --t-h-1: 700 80px / 1 "Degular", sans-serif;
    --t-h-2: 700 48px / 1 "Degular", sans-serif;
    --t-h-3: 700 32px / 1 "Degular", sans-serif;
    --t-h-4: 700 24px / 1 "Degular", sans-serif;
    --t-b-1: 400 16px / 1.2 "Degular", sans-serif;
    --t-b-2: 400 14px / 1.2 "Degular", sans-serif;
    --t-b-3: 400 12px / 1.2 "Degular", sans-serif;
    --t-l-1: 600 16px / 1 "Degular", sans-serif;
    --t-l-2: 600 14px / 1 "Degular", sans-serif;
    --t-brand: 900 80px / 0.8 "Degular", sans-serif;

    /* ── Legacy font variables (now pointing to Degular) ── */
    --font-display: "Degular", sans-serif;
    --font-body: "Degular", sans-serif;

    /* ── Colors ── */
    --color-primary: #2B82D4;
    --color-primary-rgb: 43, 130, 212;
    --color-bg-primary: #F7F8F6;
    --color-bg-secondary: #EBECE8;
    --color-bg-tertiary: #FFFFFF;
    --color-surface: rgba(255, 255, 255, 0.65);
    --color-surface-hover: rgba(255, 255, 255, 0.85);
    --color-border: rgba(255, 255, 255, 0.4);
    --color-border-light: rgba(255, 255, 255, 0.2);
    --color-accent: #111111;
    --color-accent-hover: #333333;
    --color-accent-subtle: #E3E8D8;
    --color-accent-rgb: 17, 17, 17;
    --color-text-primary: #111111;
    --color-text-secondary: #555555;
    --color-text-muted: #888888;
    --color-success: #4ADE80;
    --color-error: #F87171;
    --color-warning: #FBBF24;

    /* ── Typography Sizing (legacy compat) ── */
    --text-display: clamp(3rem, 6vw, 5rem);
    --text-h1: clamp(2.25rem, 4vw, 3.5rem);
    --text-h2: clamp(1.75rem, 3vw, 2.5rem);
    --text-h3: clamp(1.25rem, 2vw, 1.75rem);
    --text-body: 1.0625rem;
    --text-body-sm: 0.9375rem;
    --text-caption: 0.8125rem;
    --text-overline: 0.75rem;

    /* ── Spacing ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Layout ── */
    --max-width: 1200px;
    --nav-height: 72px;
    --s-contain: Min(2.5vw, 16px);

    /* ── Borders ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 16px 50px rgba(0, 0, 0, 0.1);
    --shadow-glow: none;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 200ms;
    --duration-normal: 350ms;
    --duration-slow: 600ms;

    /* ── Glassmorphism Specific ── */
    --glass-blur: blur(24px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.65);
}

/* ── Responsive typography overrides ── */
@media screen and (min-width: 1921px) {
    :root {
        --t-h-1: 700 100px / 1 "Degular", sans-serif;
        --t-h-2: 700 80px / 1 "Degular", sans-serif;
        --t-h-3: 700 40px / 1 "Degular", sans-serif;
        --t-h-4: 700 30px / 1 "Degular", sans-serif;
        --t-b-1: 400 20px / 1.2 "Degular", sans-serif;
        --t-b-2: 400 16px / 1.2 "Degular", sans-serif;
        --t-b-3: 400 14px / 1.2 "Degular", sans-serif;
        --t-l-1: 600 18px / 1 "Degular", sans-serif;
        --t-l-2: 600 16px / 1 "Degular", sans-serif;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --t-h-1: 700 64px / 1 "Degular", sans-serif;
        --t-h-2: 700 40px / 1 "Degular", sans-serif;
        --t-h-3: 700 28px / 1 "Degular", sans-serif;
        --t-h-4: 700 20px / 1 "Degular", sans-serif;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --t-h-1: 700 48px / 1 "Degular", sans-serif;
        --t-h-2: 700 32px / 1 "Degular", sans-serif;
        --t-h-3: 700 24px / 1 "Degular", sans-serif;
        --t-h-4: 700 16px / 1 "Degular", sans-serif;
        --t-b-1: 400 14px / 1.2 "Degular", sans-serif;
        --t-b-2: 400 12px / 1.2 "Degular", sans-serif;
        --t-b-3: 400 10px / 1.2 "Degular", sans-serif;
        --t-l-1: 600 14px / 1 "Degular", sans-serif;
    }
}