/*
 * IMTOS webshop + back-office design tokens.
 *
 * The shop (shop.imtos.nl) and back-office (admin.imtos.nl) adopt their own
 * system - Inter + cool Zinc neutrals - extracted verbatim from the Figma file
 * "IMTOS Webshop + Back-office" (file 1T8btiNYCKtIVdcZHZ3xa8). This is
 * deliberately separate from the fase-1 website tokens (assets/styles/tokens.css,
 * Space/Hanken Grotesk + warm neutrals): only the brand purple #702283 is shared.
 *
 * Loaded by templates/shop/base.html.twig and templates/admin/base.html.twig;
 * the website is untouched. Token names mirror the Figma variable names so the
 * design context maps 1:1.
 */

@font-face {
    font-family: 'Inter';
    src: url("../../fonts/inter-var-Gz7AlRl.woff2") format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand */
    --color-bg-brand: #702283;
    --color-bg-brand-hover: #5e1c6e;
    --color-bg-brand-subtle: #f6f1f8;
    --color-text-brand: #702283;
    --color-text-on-brand: #ffffff;

    /* Text (Zinc) */
    --color-text-primary: #18181b;
    --color-text-secondary: #52525b;
    --color-text-muted: #a1a1aa;

    /* Surfaces (Zinc) */
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #f4f4f5;
    --color-bg-canvas: #fafafa;
    --color-bg-inverse: #18181b;

    /* Borders (Zinc) */
    --color-border-default: #e4e4e7;
    --color-border-strong: #d4d4d8;

    /* Status - success */
    --color-status-success-bg: #dcfce7;
    --color-status-success-fg: #15803d;
    --color-status-success-solid: #16a34a;

    /* Status - warning */
    --color-status-warning-bg: #fef3c7;
    --color-status-warning-fg: #b45309;

    /* Status - info */
    --color-status-info-bg: #dbeafe;
    --color-status-info-fg: #1d4ed8;

    /* Status - danger (form errors; extends the Figma set on the same Tailwind ramp) */
    --color-status-danger-bg: #fee2e2;
    --color-status-danger-fg: #b91c1c;
    --color-status-danger-solid: #dc2626;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px 0 rgba(15, 13, 23, 0.05);
    --shadow-overlay:
        0 12px 32px -4px rgba(15, 13, 23, 0.1),
        0 2px 6px 0 rgba(15, 13, 23, 0.08);
    --shadow-focus: 0 0 0 3px rgba(112, 34, 131, 0.22);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Type scale (px noted; Inter, desktop reference at 16px root) */
    --text-2xs: 0.6875rem;  /* 11 */
    --text-xs: 0.75rem;     /* 12 */
    --text-sm: 0.8125rem;   /* 13 */
    --text-base: 0.875rem;  /* 14 */
    --text-md: 0.9375rem;   /* 15 */
    --text-lg: 1.125rem;    /* 18 */
    --text-xl: 1.25rem;     /* 20 */
    --text-2xl: 1.5rem;     /* 24 */
    --text-3xl: 1.875rem;   /* 30 */
    --text-4xl: 2.25rem;    /* 36 */

    /* Layout */
    --shop-container: 1312px; /* Figma content max (1440 - 2x64 gutter) */
}