/**
 * ITSWEBER CMS – Design Token System
 *
 * 3-Layer Architecture:
 *   1. Primitive Tokens  – Raw values (colors, sizes, weights)
 *   2. Semantic Tokens   – Purpose-based aliases (surface, feedback, interactive)
 *   3. Component Tokens  – Component-specific (sidebar, topbar, form, card)
 *
 * Rules:
 *   - Components ONLY reference Semantic or Component tokens
 *   - Semantic tokens reference Primitive tokens
 *   - Primitive tokens hold the raw values
 *   - Changing a Primitive token cascades through all layers
 */

/* ═══════════════════════════════════════════════════════════════════════
   FONT FACE – Inter (self-hosted, latin subset, OFL license)
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/admin/assets/fonts/inter/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/admin/assets/fonts/inter/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/admin/assets/fonts/inter/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/admin/assets/fonts/inter/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

    /* ═══════════════════════════════════════════════════════════════════════
       LAYER 1: PRIMITIVE TOKENS – Raw values, never used directly in CSS
       ═══════════════════════════════════════════════════════════════════════ */

    /* ── Colors: Brand ── */
    --p-teal-600: #0e7490;
    --p-teal-700: #0a5a6e;
    --p-teal-500: #14919b;
    --p-emerald-600: #0d9488;
    --p-emerald-300: #2dd4bf;
    --p-emerald-50: #f0fdfa;

    /* ── Colors: Feedback ── */
    --p-green-600: #059669;
    --p-green-50: #f0fdf4;
    --p-red-600: #dc2626;
    --p-red-50: #fef2f2;
    --p-amber-600: #d97706;
    --p-amber-50: #fffbeb;
    --p-blue-50: #eff6ff;

    /* ── Colors: Neutral ── */
    --p-white: #fff;
    --p-black: #000;
    --p-gray-50: #f8fafc;
    --p-gray-100: #f1f5f9;
    --p-gray-200: #e2e8f0;
    --p-gray-300: #cbd5e1;
    --p-gray-400: #94a3b8;
    --p-gray-500: #64748b;
    --p-gray-600: #475569;
    --p-gray-700: #334155;
    --p-gray-800: #1e293b;
    --p-gray-900: #0f172a;

    /* ── Colors: Sidebar ── */
    --p-navy-900: #071320;
    --p-navy-800: #0c1e35;
    --p-navy-950: #040d18;
    --p-slate-500: #6b8099;
    --p-slate-300: #b8d0e8;
    --p-cyan-300: #5eead4;

    /* ── Spacing (8px base, 1rem = 16px) ── */
    --p-space-0: 0;
    --p-space-px: 1px;
    --p-space-0_5: 0.125rem;  /*  2px */
    --p-space-1: 0.25rem;     /*  4px */
    --p-space-1_5: 0.375rem;  /*  6px */
    --p-space-2: 0.5rem;      /*  8px */
    --p-space-2_5: 0.625rem;  /* 10px */
    --p-space-3: 0.75rem;     /* 12px */
    --p-space-3_5: 0.875rem;  /* 14px */
    --p-space-4: 1rem;        /* 16px */
    --p-space-5: 1.25rem;     /* 20px */
    --p-space-6: 1.5rem;      /* 24px */
    --p-space-8: 2rem;        /* 32px */
    --p-space-10: 2.5rem;     /* 40px */
    --p-space-12: 3rem;       /* 48px */

    /* ── Typography: Sizes ── */
    --p-text-2xs: 0.6875rem;  /* 11px */
    --p-text-xs: 0.75rem;     /* 12px */
    --p-text-sm: 0.8125rem;   /* 13px */
    --p-text-base: 0.875rem;  /* 14px – admin base */
    --p-text-md: 0.9375rem;   /* 15px */
    --p-text-lg: 1rem;        /* 16px */
    --p-text-xl: 1.125rem;    /* 18px */
    --p-text-2xl: 1.25rem;    /* 20px */
    --p-text-3xl: 1.375rem;   /* 22px */
    --p-text-4xl: 1.625rem;   /* 26px */

    /* ── Typography: Weights ── */
    --p-font-normal: 400;
    --p-font-medium: 500;
    --p-font-semibold: 600;
    --p-font-bold: 700;
    --p-font-extrabold: 800;

    /* ── Typography: Line Heights ── */
    --p-leading-tight: 1.25;
    --p-leading-snug: 1.375;
    --p-leading-normal: 1.5;
    --p-leading-relaxed: 1.625;

    /* ── Typography: Stacks ── */
    --p-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --p-font-mono: 'SF Mono', Monaco, Consolas, monospace;

    /* ── Borders: Radius ── */
    --p-radius-xs: 3px;
    --p-radius-sm: 6px;
    --p-radius-md: 8px;
    --p-radius-lg: 12px;
    --p-radius-xl: 16px;
    --p-radius-full: 9999px;
    --p-radius-circle: 50%;

    /* ── Shadows ── */
    --p-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --p-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --p-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --p-shadow-lg: 0 12px 28px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

    /* ── Motion ── */
    --p-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --p-duration-fast: 120ms;
    --p-duration-normal: 180ms;
    --p-duration-slow: 250ms;
    --p-duration-slower: 350ms;

    /* ── Breakpoints (reference only, used in @media) ── */
    /* --p-bp-mobile: 480px; */
    /* --p-bp-tablet: 768px; */
    /* --p-bp-small: 640px;  */


    /* ═══════════════════════════════════════════════════════════════════════
       LAYER 2: SEMANTIC TOKENS – Purpose-based, used in component CSS
       ═══════════════════════════════════════════════════════════════════════ */

    /* ── Colors: Surface ── */
    --surface-primary: var(--p-white);
    --surface-secondary: var(--p-gray-50);
    --surface-tertiary: var(--p-gray-100);
    --surface-inverse: var(--p-gray-900);

    /* ── Colors: Text ── */
    --text-primary: var(--p-gray-900);
    --text-secondary: var(--p-gray-600);
    --text-tertiary: var(--p-gray-500);
    --text-muted: var(--p-gray-400);
    --text-inverse: var(--p-white);
    --text-link: var(--p-teal-600);

    /* ── Colors: Border ── */
    --border-primary: var(--p-gray-200);
    --border-secondary: var(--p-gray-300);
    --border-focus: var(--p-emerald-600);

    /* ── Colors: Interactive ── */
    --interactive-primary: var(--p-teal-600);
    --interactive-primary-hover: var(--p-teal-700);
    --interactive-primary-light: var(--p-teal-500);
    --interactive-accent: var(--p-emerald-600);
    --interactive-accent-light: var(--p-emerald-300);
    --interactive-accent-bg: var(--p-emerald-50);

    /* ── Colors: Feedback ── */
    --feedback-success: var(--p-green-600);
    --feedback-success-bg: var(--p-green-50);
    --feedback-danger: var(--p-red-600);
    --feedback-danger-bg: var(--p-red-50);
    --feedback-warning: var(--p-amber-600);
    --feedback-warning-bg: var(--p-amber-50);
    --feedback-info-bg: var(--p-blue-50);

    /* ── Colors: Focus ── */
    --focus-ring: 0 0 0 3px rgba(13,148,136,0.12);
    --focus-ring-strong: 0 0 0 3px rgba(13,148,136,0.3);

    /* ── Spacing: Semantic ── */
    --space-xs: var(--p-space-2);     /*  8px – tight gaps, icon padding */
    --space-sm: var(--p-space-3);     /* 12px – within components */
    --space-md: var(--p-space-4);     /* 16px – default component padding */
    --space-lg: var(--p-space-5);     /* 20px – between components */
    --space-xl: var(--p-space-6);     /* 24px – section spacing */
    --space-2xl: var(--p-space-8);    /* 32px – large section gaps */

    /* ── Typography: Semantic ── */
    --font-family: var(--p-font-sans);
    --font-family-mono: var(--p-font-mono);
    --font-size-body: var(--p-text-base);       /* 14px */
    --font-size-small: var(--p-text-sm);        /* 13px */
    --font-size-caption: var(--p-text-xs);      /* 12px */
    --font-size-label: var(--p-text-sm);        /* 13px */
    --font-size-heading-sm: var(--p-text-lg);   /* 16px */
    --font-size-heading-md: var(--p-text-2xl);  /* 20px */
    --font-size-heading-lg: var(--p-text-3xl);  /* 22px */
    --font-size-heading-xl: var(--p-text-4xl);  /* 26px */

    /* ── Borders: Semantic ── */
    --radius-sm: var(--p-radius-sm);    /* 6px – inputs, small cards */
    --radius-md: var(--p-radius-md);    /* 8px – cards, panels */
    --radius-lg: var(--p-radius-lg);    /* 12px – modals, large cards */
    --radius-full: var(--p-radius-full); /* pills, badges */

    /* ── Shadows: Semantic ── */
    --shadow-xs: var(--p-shadow-xs);
    --shadow-sm: var(--p-shadow-sm);
    --shadow-md: var(--p-shadow-md);
    --shadow-lg: var(--p-shadow-lg);

    /* ── Motion: Semantic ── */
    --transition-fast: var(--p-duration-fast) var(--p-ease);
    --transition-normal: var(--p-duration-normal) var(--p-ease);
    --transition-slow: var(--p-duration-slow) var(--p-ease);


    /* ═══════════════════════════════════════════════════════════════════════
       LAYER 3: COMPONENT TOKENS – Specific to admin UI components
       ═══════════════════════════════════════════════════════════════════════ */

    /* ── Sidebar ── */
    --sidebar-width: 260px;
    --sidebar-bg: var(--p-navy-900);
    --sidebar-bg-gradient: linear-gradient(180deg, var(--p-navy-800) 0%, var(--p-navy-900) 60%, var(--p-navy-950) 100%);
    --sidebar-text: var(--p-slate-500);
    --sidebar-text-hover: var(--p-slate-300);
    --sidebar-text-active: var(--p-white);
    --sidebar-accent: var(--p-cyan-300);
    --sidebar-hover-bg: rgba(13,148,136,0.10);
    --sidebar-active-bg: linear-gradient(135deg, rgba(13,148,136,0.22) 0%, rgba(14,116,144,0.18) 100%);
    --sidebar-border: rgba(13,148,136,0.08);

    /* ── Topbar ── */
    --topbar-height: 56px;
    --topbar-bg: var(--surface-primary);
    --topbar-border: var(--border-primary);

    /* ── Card ── */
    --card-bg: var(--surface-primary);
    --card-border: var(--border-primary);
    --card-radius: var(--radius-md);
    --card-padding: var(--space-lg);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);

    /* ── Form Field ── */
    --field-bg: var(--surface-primary);
    --field-border: var(--border-primary);
    --field-border-focus: var(--border-focus);
    --field-radius: var(--radius-sm);
    --field-padding-x: var(--space-sm);
    --field-padding-y: var(--space-xs);
    --field-font-size: var(--font-size-body);
    --field-focus-ring: var(--focus-ring);

    /* ── Form Item Card (repeatable items in sections) ── */
    --item-card-bg: var(--surface-secondary);
    --item-card-border: 1px solid var(--border-primary);
    --item-card-radius: var(--radius-md);
    --item-card-padding: var(--space-md);
    --item-card-gap: var(--space-xs);

    /* ── Button ── */
    --btn-radius: var(--radius-sm);
    --btn-font-size: var(--font-size-body);
    --btn-font-weight: var(--p-font-semibold);
    --btn-padding-x: var(--space-lg);
    --btn-padding-y: var(--space-xs);
    --btn-sm-padding-x: var(--space-sm);
    --btn-sm-padding-y: var(--p-space-1_5);
    --btn-sm-font-size: var(--font-size-small);

    /* ── Table ── */
    --table-header-bg: linear-gradient(135deg, var(--surface-secondary) 0%, var(--surface-tertiary) 100%);
    --table-row-hover: rgba(13,148,136,0.04);
    --table-border: var(--border-primary);

    /* ── Badge ── */
    --badge-radius: var(--radius-full);
    --badge-font-size: var(--p-text-2xs);
    --badge-padding: var(--p-space-0_5) var(--p-space-2);

    /* ── Alert ── */
    --alert-radius: var(--radius-md);
    --alert-padding: var(--space-sm) var(--space-md);
    --alert-border-width: 4px;

    /* ── Modal ── */
    --modal-backdrop: rgba(15, 23, 42, 0.55);
    --modal-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-lg);
    --modal-padding: var(--space-xl);

    /* ── Content Header ── */
    --content-header-padding: var(--space-lg) var(--space-xl);

    /* ── Section Editor Presentation Grid ── */
    --section-grid-gap: var(--space-sm) var(--space-lg);
}