/* CMSwift UI base */
/* =====================================================================
   CMSwift UI — Design Tokens v1 (PRO)
   - Full color scales 50..950
   - Semantic tokens for dev experience
   - Light default + Dark via data-theme="dark"
   - Brand skins via data-brand="*"
   ===================================================================== */

:root {
  /* ======================
     0) Meta / Layout tokens
     ====================== */
  --cms-brand: "CMSwift";

  --cms-space-1: 4px;
  --cms-space-2: 8px;
  --cms-space-3: 12px;
  --cms-space-4: 16px;
  --cms-space-5: 20px;
  --cms-space-6: 24px;

  /* ======================
     1) Neutral scale (foundation)
     ====================== */
  --cms-gray-50: #f8fafc;
  --cms-gray-100: #f1f5f9;
  --cms-gray-200: #e2e8f0;
  --cms-gray-300: #cbd5e1;
  --cms-gray-400: #94a3b8;
  --cms-gray-500: #64748b;
  --cms-gray-600: #475569;
  --cms-gray-700: #334155;
  --cms-gray-800: #1f2937;
  --cms-gray-900: #0f172a;
  --cms-gray-950: #020617;

  /* ======================
     2) Primary scale (Swift Blue)
     ====================== */
  --cms-primary-50: #eef6ff;
  --cms-primary-100: #dbeafe;
  --cms-primary-200: #bfdbfe;
  --cms-primary-300: #93c5fd;
  --cms-primary-400: #60a5fa;
  --cms-primary-500: #3b82f6;
  --cms-primary-600: #3c78f7;
  --cms-primary-700: #1d4ed8;
  --cms-primary-800: #1e40af;
  --cms-primary-900: #1e3a8a;
  --cms-primary-950: #172554;

  /* ======================
     3) Accent scale (Aurora Teal)
     ====================== */
  --cms-accent-50: #ecfeff;
  --cms-accent-100: #cffafe;
  --cms-accent-200: #a5f3fc;
  --cms-accent-300: #67e8f9;
  --cms-accent-400: #22d3ee;
  --cms-accent-500: #06b6d4;
  --cms-accent-600: #0891b2;
  --cms-accent-700: #0e7490;
  --cms-accent-800: #155e75;
  --cms-accent-900: #164e63;
  --cms-accent-950: #083344;

  /* ======================
     4) Status scales
     ====================== */
  /* Success */
  --cms-success-50: #f0fdf4;
  --cms-success-100: #dcfce7;
  --cms-success-200: #bbf7d0;
  --cms-success-300: #86efac;
  --cms-success-400: #4ade80;
  --cms-success-500: #22c55e;
  --cms-success-600: #16a34a;
  --cms-success-700: #15803d;
  --cms-success-800: #166534;
  --cms-success-900: #14532d;
  --cms-success-950: #052e16;

  /* Warning */
  --cms-warning-50: #fffbeb;
  --cms-warning-100: #fef3c7;
  --cms-warning-200: #fde68a;
  --cms-warning-300: #fcd34d;
  --cms-warning-400: #fbbf24;
  --cms-warning-500: #f59e0b;
  --cms-warning-600: #d97706;
  --cms-warning-700: #b45309;
  --cms-warning-800: #92400e;
  --cms-warning-900: #78350f;
  --cms-warning-950: #451a03;

  /* Danger */
  --cms-danger-50: #fef2f2;
  --cms-danger-100: #fee2e2;
  --cms-danger-200: #fecaca;
  --cms-danger-300: #fca5a5;
  --cms-danger-400: #f87171;
  --cms-danger-500: #ef4444;
  --cms-danger-600: #dc2626;
  --cms-danger-700: #b91c1c;
  --cms-danger-800: #991b1b;
  --cms-danger-900: #7f1d1d;
  --cms-danger-950: #450a0a;

  /* Info */
  --cms-info-50: #eef4ff;
  --cms-info-100: #e0e7ff;
  --cms-info-200: #c7d9fe;
  --cms-info-300: #a5c9fc;
  --cms-info-400: #819ff8;
  --cms-info-500: #547dce;
  --cms-info-600: #445fc1;
  --cms-info-700: #3352b1;
  --cms-info-800: #3051a3;
  --cms-info-900: #2e3d81;
  --cms-info-950: #1b264b;

  /* ======================
    5) Special scales (optional but “premium”)
    - Violet (creative)
    - Pink (marketing)
    - Orange (energy)
  ====================== */
  --cms-violet-50: #f5f3ff;
  --cms-violet-100: #ede9fe;
  --cms-violet-200: #ddd6fe;
  --cms-violet-300: #c4b5fd;
  --cms-violet-400: #a78bfa;
  --cms-violet-500: #8b5cf6;
  --cms-violet-600: #7c3aed;
  --cms-violet-700: #6d28d9;
  --cms-violet-800: #5b21b6;
  --cms-violet-900: #4c1d95;
  --cms-violet-950: #2e1065;

  --cms-pink-50: #fdf2f8;
  --cms-pink-100: #fce7f3;
  --cms-pink-200: #fbcfe8;
  --cms-pink-300: #f9a8d4;
  --cms-pink-400: #f472b6;
  --cms-pink-500: #ec4899;
  --cms-pink-600: #db2777;
  --cms-pink-700: #be185d;
  --cms-pink-800: #9d174d;
  --cms-pink-900: #831843;
  --cms-pink-950: #500724;

  --cms-orange-50: #fff7ed;
  --cms-orange-100: #ffedd5;
  --cms-orange-200: #fed7aa;
  --cms-orange-300: #fdba74;
  --cms-orange-400: #fb923c;
  --cms-orange-500: #f97316;
  --cms-orange-600: #ea580c;
  --cms-orange-700: #c2410c;
  --cms-orange-800: #9a3412;
  --cms-orange-900: #7c2d12;
  --cms-orange-950: #431407;

  /* ======================
     6) Social / Brand colors
     ====================== */
  --cms-facebook: #1877f2;
  --cms-twitter: #1da1f2;
  --cms-x: #0b0f19;
  --cms-linkedin: #0a66c2;
  --cms-google: #ea4335;
  --cms-youtube: #ff0000;
  --cms-vimeo: #1ab7ea;
  --cms-dribbble: #ea4c89;
  --cms-github: #18181b;
  --cms-instagram: #e1306c;
  --cms-pinterest: #e60023;
  --cms-rss: #f59e0b;

  /* ======================
     7) Alpha tokens (glass / overlay)
     ====================== */
  --cms-alpha-1: rgba(2, 6, 23, 0.04);
  --cms-alpha-2: rgba(2, 6, 23, 0.08);
  --cms-alpha-3: rgba(2, 6, 23, 0.12);
  --cms-alpha-4: rgba(2, 6, 23, 0.18);
  --cms-alpha-5: rgba(2, 6, 23, 0.26);

  /* ======================
     8) Shadows (premium)
     ====================== */
  --cms-shadow-sm: 0 1px 2px rgba(2, 6, 23, .30);
  --cms-shadow-md: 0 10px 30px rgba(2, 6, 23, .50);
  --cms-shadow-lg: 0 22px 60px rgba(2, 6, 23, .70);

  /* =========================================================
     SEMANTIC TOKENS (the real win)
     ========================================================= */

  /* Backgrounds & surfaces */
  --cms-bg: var(--cms-gray-50);
  --cms-bg-2: var(--cms-gray-100);
  --cms-surface: var(--cms-gray-200);
  --cms-surface-2: var(--cms-gray-300);
  --cms-surface-3: var(--cms-gray-400);

  /* Text */
  --cms-text: var(--cms-gray-900);
  --cms-text-2: var(--cms-gray-700);
  --cms-text-3: var(--cms-gray-500);
  --cms-text-inverse: #282828;

  /* Borders */



  /* Brand actions */
  --cms-accent: var(--cms-accent-600);
  --cms-accent-soft: var(--cms-accent-500);
  --cms-accent-text: var(--cms-accent-800);

  /* Focus ring */
  --cms-ring: rgba(59, 130, 246, 0.45);
  --cms-ring-strong: rgba(59, 130, 246, 0.65);

  /* Components defaults */
  --cms-card-bg: var(--cms-surface);
  --cms-card-border: var(--cms-border-color);

  --cms-btn-bg: var(--cms-primary);
  --cms-btn-bg-hover: var(--cms-primary-hover);
  --cms-btn-text: var(--cms-text-inverse);

  --cms-input-bg: var(--cms-surface);
  --cms-input-border: var(--cms-border-color);
  --cms-input-text: var(--cms-text);
  --cms-input-placeholder: var(--cms-text-3);

  --cms-chip-bg: var(--cms-surface-2);
  --cms-chip-text: var(--cms-text-2);
  --cms-badge-bg: var(--cms-primary-soft);
  --cms-badge-text: var(--cms-primary-text);


  --cms-panel: #e9e9e9;
  --cms-text: #434343;
  --cms-muted: #5d5d5d;

  --cms-border-color: rgba(93, 95, 100, 0.35);
  --cms-border-color-2: var(--cms-gray-400);
  --cms-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --cms-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.25);
  --cms-icon-color: var(--cms-text);
  --cms-icon-size-xxs: 8px;
  --cms-icon-size-xs: 10px;
  --cms-icon-size-sm: 14px;
  --cms-icon-size-md: 18px;
  --cms-icon-size-lg: 24px;
  --cms-icon-size-xl: 32px;
  --cms-icon-size-xxl: 42px;
  --cms-icon-size-xxxl: 64px;
  --cms-icon-stroke-width: 0.1rem;

  --cms-size-xxs: 6px;
  --cms-size-xs: 10px;
  --cms-size-sm: 18px;
  --cms-size-md: 26px;
  --cms-size-lg: 32px;
  --cms-size-xl: 48px;
  --cms-size-xxl: 64px;
  --cms-size-xxxl: 128px;

  /* States */

  --cms-primary: var(--cms-primary-600);
  --cms-primary-hover: var(--cms-primary-400);
  --cms-primary-active: var(--cms-primary-800);
  --cms-primary-focus: var(--cms-primary-600);
  --cms-primary-disabled: var(--cms-primary-300);
  --cms-primary-soft: var(--cms-primary-500);
  --cms-primary-text: var(--cms-primary-500);

  --cms-secondary: var(--cms-gray-600);
  --cms-secondary-hover: var(--cms-gray-400);
  --cms-secondary-active: var(--cms-gray-800);
  --cms-secondary-focus: var(--cms-gray-600);
  --cms-secondary-disabled: var(--cms-gray-300);
  --cms-secondary-soft: var(--cms-gray-500);
  --cms-secondary-text: var(--cms-gray-500);

  --cms-danger: var(--cms-danger-600);
  --cms-danger-hover: var(--cms-danger-400);
  --cms-danger-active: var(--cms-danger-800);
  --cms-danger-focus: var(--cms-danger-600);
  --cms-danger-disabled: var(--cms-danger-300);
  --cms-danger-soft: var(--cms-danger-400);
  --cms-danger-text: var(--cms-danger-500);

  --cms-warning: var(--cms-warning-500);
  --cms-warning-hover: var(--cms-warning-400);
  --cms-warning-active: var(--cms-warning-400);
  --cms-warning-focus: var(--cms-warning-600);
  --cms-warning-disabled: var(--cms-warning-700);
  --cms-warning-soft: var(--cms-warning-400);
  --cms-warning-text: var(--cms-warning-500);

  --cms-success: var(--cms-success-600);
  --cms-success-hover: var(--cms-success-500);
  --cms-success-active: var(--cms-success-800);
  --cms-success-focus: var(--cms-success-600);
  --cms-success-disabled: var(--cms-success-300);
  --cms-success-soft: var(--cms-success-600);
  --cms-success-text: var(--cms-success-500);

  --cms-info: var(--cms-info-600);
  --cms-info-hover: var(--cms-info-400);
  --cms-info-active: var(--cms-info-800);
  --cms-info-focus: var(--cms-info-600);
  --cms-info-disabled: var(--cms-info-300);
  --cms-info-soft: var(--cms-info-500);
  --cms-info-text: var(--cms-info-500);

  --cms-dark: var(--cms-gray-800);
  --cms-dark-hover: var(--cms-gray-600);
  --cms-dark-active: var(--cms-gray-700);
  --cms-dark-focus: var(--cms-gray-700);
  --cms-dark-disabled: var(--cms-gray-700);
  --cms-dark-soft: var(--cms-gray-700);
  --cms-dark-text: var(--cms-gray-100);

  --cms-light: var(--cms-bg-2);
  --cms-light-hover: var(--cms-surface);
  --cms-light-active: var(--cms-surface-2);
  --cms-light-focus: var(--cms-bg-2);
  --cms-light-disabled: var(--cms-surface-2);
  --cms-light-soft: var(--cms-gray-100);
  --cms-light-text: var(--cms-gray-900);

  --cms-font-size: 14px;
  --cms-font-weight: 400;
  --cms-font-family: "Nunito", sans-serif;
  --set-icon-size: calc(var(--cms-font-size) + 4px);

  --cms-font-size-xxs: 6px;
  --cms-font-size-xs: 10px;
  --cms-font-size-sm: 12px;
  --cms-font-size-md: 14px;
  --cms-font-size-lg: 18px;
  --cms-font-size-xl: 24px;
  --cms-font-size-xxl: 32px;
  --cms-font-size-xxxl: 48px;

  --cms-input-height-xxs: 16px;
  --cms-input-height-xs: 20px;
  --cms-input-height-sm: 24px;
  --cms-input-height-md: 32px;
  --cms-input-height-lg: 48px;
  --cms-input-height-xl: 64px;
  --cms-input-height-xxl: 80px;

  --set-shadow: 0 3px 6px color-mix(in srgb, var(--cms-gray-600) 40%, transparent);
  --set-color-0: var(--cms-gray-100);
  --set-color-1: var(--cms-gray-300);
  --set-color-2: var(--cms-gray-300);
  --set-color-3: var(--cms-gray-500);
  --set-color-4: var(--cms-gray-600);
  --set-border-width: 1px;

  --set-gradient-deg: 180deg;

  --cms-b-radius-default: 4px;
  --cms-input-height-default: var(--cms-input-height-md);
  --cms-select-bg-default: var(--cms-panel);
  --cms-bg-default: var(--cms-panel);

  --cms-theme-color-1: #f8f9fa;
  --cms-theme-color-2: #e9ecef;
  --cms-theme-color-3: #dee2e6;
  --cms-theme-color-4: #ced4da;
  --cms-theme-color-5: #adb5bd;
  --cms-theme-color-6: #868e96;
  --cms-theme-color-7: #495057;
  --cms-theme-color-8: #343a40;
  --cms-theme-color-9: #212529;
}

/* =====================================================================
   DARK THEME (high quality)
   ===================================================================== */
:root[data-theme="dark"] {
  --cms-alpha-1: rgba(255, 255, 255, 0.04);
  --cms-alpha-2: rgba(255, 255, 255, 0.08);
  --cms-alpha-3: rgba(255, 255, 255, 0.12);
  --cms-alpha-4: rgba(255, 255, 255, 0.18);
  --cms-alpha-5: rgba(255, 255, 255, 0.26);

  --cms-bg: #121212;
  --cms-bg-2: #0b1020;
  --cms-surface: #0f172a;
  --cms-surface-2: #111c34;
  --cms-surface-3: #16213f;

  --cms-text: #e5e7eb;
  --cms-text-2: #cbd5e1;
  --cms-text-3: #94a3b8;
  --cms-text-inverse: #0b1020;

  --cms-panel: #10141e;
  --cms-text: #cbcbcb;
  --cms-muted: #6b6b6b;

  --cms-border-color: rgba(148, 163, 184, 0.18);
  --cms-border-color-2: rgba(148, 163, 184, 0.26);

  --cms-accent: var(--cms-accent-400);
  --cms-accent-soft: rgba(34, 211, 238, 0.12);
  --cms-accent-text: var(--cms-accent-200);

  --cms-ring: rgba(96, 165, 250, 0.45);
  --cms-ring-strong: rgba(96, 165, 250, 0.65);

  --cms-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --cms-shadow-md: 0 10px 30px rgba(0, 0, 0, .40);
  --cms-shadow-lg: 0 22px 60px rgba(0, 0, 0, .70);

  --cms-card-bg: var(--cms-surface);
  --cms-card-border: var(--cms-border-color);

  --cms-input-bg: rgba(255, 255, 255, 0.02);
  --cms-input-border: var(--cms-border-color);
  --cms-input-text: var(--cms-text);

  --cms-b-radius-default: 4px;
  --cms-input-height-default: var(--cms-input-height-md);
  --cms-select-bg-default: var(--cms-panel);
  --cms-bg-default: var(--cms-panel);

  --cms-theme-color-1: #212529;
  --cms-theme-color-2: #343a40;
  --cms-theme-color-3: #495057;
  --cms-theme-color-4: #868e96;
  --cms-theme-color-5: #adb5bd;
  --cms-theme-color-6: #ced4da;
  --cms-theme-color-7: #dee2e6;
  --cms-theme-color-8: #e9ecef;
  --cms-theme-color-9: #f8f9fa;

}

/* =====================================================================
   BRAND SKINS (optional — 1 linea per cambiare “brand”)
   ===================================================================== */

/* Emerald brand */
:root[data-brand="emerald"] {
  --cms-primary-500: #10b981;
  --cms-primary-600: #059669;
  --cms-primary-700: #047857;

  --cms-primary: var(--cms-primary-600);
  --cms-primary-hover: var(--cms-primary-700);
  --cms-ring: rgba(16, 185, 129, 0.45);
}

/* Violet brand */
:root[data-brand="violet"] {
  --cms-primary-500: #8b5cf6;
  --cms-primary-600: #7c3aed;
  --cms-primary-700: #6d28d9;

  --cms-primary: var(--cms-primary-600);
  --cms-primary-hover: var(--cms-primary-700);
  --cms-ring: rgba(139, 92, 246, 0.45);
}

/* FONTS */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v311/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2) format('woff2');
}

:root {
  --cms-font: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*,
*::before,
*::after {
  font-family: var(--cms-font);
}