/**
 * DIVEIN Design Tokens
 *
 * All CSS custom properties for the DIVEIN Design System.
 * Loaded site-wide on frontend, admin, Gutenberg editor, and Elementor editor.
 *
 * Migrated from WPCode snippet 181636 (01-design-tokens.css).
 *
 * NOTE: These tokens are also duplicated in editor-style.css for the
 * Gutenberg editor iframe context (add_editor_style() loads into a
 * separate DOM — this file is enqueued in the outer admin frame and
 * on the frontend).
 *
 * @package FoxizChild
 * @since 1.5.0
 */

:root {
  /* ========================================
     PRIMARY COLORS
     The 7 core brand colors
     ======================================== */

  --navy: #07275A;
  --light-blue: #6BB3D9;
  --yellow: #E8C547;
  --green: #5A9B8A;
  --red: #D46B6B;
  --orange: #E89B5C;
  --beige: #FAF6F0;


  /* ========================================
     COLOR SCALES
     Each scale: 5 (ultra-light) → 50 → 900 (darkest)
     ======================================== */

  /* Navy (Primary Blue) — anchor: #07275A (900) */
  --blue-5: #F9FAFB;
  --blue-50: #E8EEF4;
  --blue-100: #C7D4E3;
  --blue-200: #A3B8D0;
  --blue-300: #7E9CBC;
  --blue-400: #6186AC;
  --blue-500: #456F9B;
  --blue-600: #365887;
  --blue-700: #264270;
  --blue-800: #172D58;
  --blue-900: #07275A;

  /* Light Blue — anchor: #6BB3D9 (500) */
  --lightblue-5: #FAFCFD;
  --lightblue-50: #EBF5FA;
  --lightblue-100: #D0E8F3;
  --lightblue-200: #B2D9EC;
  --lightblue-300: #93C9E4;
  --lightblue-400: #7CBFDF;
  --lightblue-500: #6BB3D9;
  --lightblue-600: #549CC4;
  --lightblue-700: #3E82A9;
  --lightblue-800: #2A678A;
  --lightblue-900: #184D6B;

  /* Yellow — anchor: #E8C547 (500) */
  --yellow-5: #FEFDF9;
  --yellow-50: #FDF9E8;
  --yellow-100: #FAF0C5;
  --yellow-200: #F6E69F;
  --yellow-300: #F1DB78;
  --yellow-400: #EDD05A;
  --yellow-500: #E8C547;
  --yellow-600: #D4AF2E;
  --yellow-700: #B8941F;
  --yellow-800: #917316;
  --yellow-900: #6A530F;

  /* Green — anchor: #5A9B8A (500) */
  --green-5: #FAFCFB;
  --green-50: #ECF4F2;
  --green-100: #D2E5E0;
  --green-200: #B5D4CC;
  --green-300: #97C3B7;
  --green-400: #7FB5A6;
  --green-500: #5A9B8A;
  --green-600: #4A8575;
  --green-700: #3A6E60;
  --green-800: #2B574B;
  --green-900: #1D4037;

  /* Red — anchor: #D46B6B (500) */
  --red-5: #FEFBFB;
  --red-50: #FBEFEF;
  --red-100: #F5D7D7;
  --red-200: #EDBCBC;
  --red-300: #E4A0A0;
  --red-400: #DC8787;
  --red-500: #D46B6B;
  --red-600: #C45454;
  --red-700: #A94242;
  --red-800: #873434;
  --red-900: #642626;

  /* Orange — anchor: #E89B5C (500) */
  --orange-5: #FEFCFA;
  --orange-50: #FDF4EC;
  --orange-100: #FAE4D1;
  --orange-200: #F5D1B3;
  --orange-300: #F0BD94;
  --orange-400: #ECAC78;
  --orange-500: #E89B5C;
  --orange-600: #D4854A;
  --orange-700: #B86D38;
  --orange-800: #96552A;
  --orange-900: #6E3E1E;

  /* Beige — anchor: #FAF6F0 (50) */
  --beige-5: #FEFDFC;
  --beige-50: #FAF6F0;
  --beige-100: #F5EFE6;
  --beige-200: #EDE5D8;
  --beige-300: #E2D7C6;
  --beige-400: #D4C5AE;
  --beige-500: #C4B193;
  --beige-600: #A99574;
  --beige-700: #8A7759;
  --beige-800: #685940;
  --beige-900: #473C2B;

  /* Gray (neutral with slight warmth) */
  --gray-5: #FDFDFD;
  --gray-50: #F8F8F7;
  --gray-100: #EEEEEC;
  --gray-200: #DFDEDA;
  --gray-300: #CCCBC6;
  --gray-400: #ADABA4;
  --gray-500: #8E8C84;
  --gray-600: #6E6C65;
  --gray-700: #52504A;
  --gray-800: #373632;
  --gray-900: #1E1D1B;


  /* ========================================
     SEMANTIC TOKENS
     Use these in components, not raw scales
     ======================================== */

  /* Primary */
  --color-primary: var(--blue-900);
  --color-primary-hover: var(--blue-800);
  --color-primary-light: var(--blue-600);
  --color-primary-muted: var(--blue-100);

  /* Secondary */
  --color-secondary: var(--lightblue-500);
  --color-secondary-hover: var(--lightblue-600);
  --color-secondary-light: var(--lightblue-200);
  --color-secondary-muted: var(--lightblue-50);

  /* Accents */
  --color-accent-yellow: var(--yellow-500);
  --color-accent-green: var(--green-500);
  --color-accent-red: var(--red-500);
  --color-accent-orange: var(--orange-500);

  /* Surfaces */
  --color-background: #FFFFFF;
  --color-background-alt: var(--gray-50);
  --color-surface: #FFFFFF;
  --color-surface-muted: var(--beige-100);
  --color-surface-hover: var(--gray-100);

  /* Borders */
  --color-border: var(--gray-200);
  --color-border-muted: var(--beige-200);
  --color-border-strong: var(--gray-400);
  --color-border-focus: var(--lightblue-500);

  /* Text */
  --color-text: var(--gray-900);
  --color-text-strong: var(--blue-900);
  --color-text-muted: var(--gray-600);
  --color-text-placeholder: var(--gray-500);
  --color-text-inverse: #FFFFFF;

  /* Interactive */
  --color-link: var(--blue-900);
  --color-link-hover: var(--blue-600);
  --color-focus: var(--lightblue-500);

  /* Status */
  --color-success: var(--green-500);
  --color-success-bg: var(--green-5);
  --color-success-border: var(--green-200);
  --color-warning: var(--orange-500);
  --color-warning-bg: var(--orange-5);
  --color-warning-border: var(--orange-200);
  --color-error: var(--red-500);
  --color-error-bg: var(--red-5);
  --color-error-border: var(--red-200);
  --color-info: var(--lightblue-500);
  --color-info-bg: var(--lightblue-5);
  --color-info-border: var(--lightblue-200);


  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(30, 29, 27, 0.05);
  --shadow-md: 0 4px 12px rgba(30, 29, 27, 0.08);
  --shadow-lg: 0 8px 24px rgba(30, 29, 27, 0.12);
  --shadow-primary: 0 4px 16px rgba(7, 39, 90, 0.2);
  --shadow-glow: 0 0 20px rgba(107, 179, 217, 0.3);


  /* ========================================
     SPACING & RADII
     ======================================== */
  --radius: 15px;
  --radius-inner-2: 13px;
  --radius-inner-4: 11px;
  --radius-inner-8: 7px;
  --radius-sm: 8px;
  --radius-full: 9999px;

  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;


  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2.25rem;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.25;
  --leading-normal: 1.35;
  --leading-relaxed: 1.4;
  --leading-loose: 1.5;

  /* Content Width */
  --content-max-width: 45rem;


  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;


  /* ========================================
     FONT WEIGHTS
     ======================================== */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;


  /* ========================================
     LETTER SPACING
     ======================================== */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;


  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
  --z-toast: 1200;


  /* ========================================
     MAX WIDTHS
     ======================================== */
  --max-w-prose: 65ch;
  --max-w-container: 1200px;
  --max-w-content: 800px;
  --max-w-narrow: 480px;


  /* ========================================
     OPACITY SCALE
     ======================================== */
  --opacity-muted: 0.6;
  --opacity-subtle: 0.7;
  --opacity-light: 0.8;
  --opacity-overlay: 0.5;


  /* ========================================
     ICON SIZES
     ======================================== */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;


  /* ========================================
     BASE COLORS
     ======================================== */
  --color-white: #FFFFFF;
  --color-black: #000000;
}