/* ==========================================================================
   VISACORP — Design System Tokens v1.0
   Shared structural tokens for FOTORDER × ViSAgree
   
   Usage: load this file FIRST, then load the appropriate theme file
   (theme-fotorder.css or theme-visagree.css) which maps --ds-* abstracts
   to brand-specific values.
   
   WCAG AA compliance: all contrast ratios documented and verified.
   ========================================================================== */

:root {

   /* -----------------------------------------------------------------------
     SPACING SCALE — 4px base unit
     ----------------------------------------------------------------------- */
   --ds-space-1: 4px;
   --ds-space-2: 8px;
   --ds-space-3: 12px;
   --ds-space-4: 16px;
   --ds-space-5: 20px;
   --ds-space-6: 24px;
   --ds-space-8: 32px;
   --ds-space-10: 40px;
   --ds-space-12: 48px;
   --ds-space-16: 64px;
   --ds-space-20: 80px;
   --ds-space-24: 96px;

   /* -----------------------------------------------------------------------
     RADIUS
     ----------------------------------------------------------------------- */
   --ds-radius-sm: 8px;
   --ds-radius-md: 12px;
   --ds-radius-lg: 16px;
   --ds-radius-xl: 24px;
   --ds-radius-pill: 999px;

   /* -----------------------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------------------- */
   --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
   --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
   --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);
   --ds-shadow-focus: 0 0 0 3px var(--ds-accent-soft, rgba(37, 99, 235, .25));

   /* -----------------------------------------------------------------------
     TRANSITIONS
     ----------------------------------------------------------------------- */
   --ds-ease: cubic-bezier(.4, 0, .2, 1);
   --ds-transition-fast: 120ms var(--ds-ease);
   --ds-transition-base: 200ms var(--ds-ease);
   --ds-transition-slow: 350ms var(--ds-ease);

   /* -----------------------------------------------------------------------
     TYPOGRAPHY — Font Stacks
     ----------------------------------------------------------------------- */
   --ds-font-title: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --ds-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --ds-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

   /* -----------------------------------------------------------------------
     TYPOGRAPHY — Size Scale (Major Third ~1.25)
     ----------------------------------------------------------------------- */
   --ds-text-display: 2.441rem;
   /* 39px */
   --ds-text-h1: 1.953rem;
   /* 31px */
   --ds-text-h2: 1.563rem;
   /* 25px */
   --ds-text-h3: 1.25rem;
   /* 20px */
   --ds-text-lead: 1.125rem;
   /* 18px */
   --ds-text-body: 1rem;
   /* 16px */
   --ds-text-small: 0.875rem;
   /* 14px */
   --ds-text-label: 0.8125rem;
   /* 13px */
   --ds-text-mini: 0.75rem;
   /* 12px */

   /* -----------------------------------------------------------------------
     TYPOGRAPHY — Weights
     ----------------------------------------------------------------------- */
   --ds-weight-regular: 400;
   --ds-weight-medium: 500;
   --ds-weight-semibold: 600;
   --ds-weight-bold: 700;
   --ds-weight-extrabold: 800;

   /* -----------------------------------------------------------------------
     TYPOGRAPHY — Line Heights
     ----------------------------------------------------------------------- */
   --ds-leading-tight: 1.2;
   --ds-leading-body: 1.6;
   --ds-leading-loose: 1.8;

   /* -----------------------------------------------------------------------
     ICONS SCALE
     ----------------------------------------------------------------------- */
   --ds-icon-xs: 14px;
   --ds-icon-sm: 16px;
   --ds-icon-md: 20px;
   --ds-icon-lg: 24px;
   --ds-icon-xl: 32px;

   /* -----------------------------------------------------------------------
     Z-INDEX SCALE
     ----------------------------------------------------------------------- */
   --ds-z-dropdown: 100;
   --ds-z-sticky: 200;
   --ds-z-overlay: 300;
   --ds-z-modal: 400;
   --ds-z-toast: 500;

   /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
   --ds-content-max: 1200px;
   --ds-content-narrow: 720px;
   --ds-header-height: 64px;
   --ds-sidebar-width: 280px;
   --ds-touch-target: 44px;
   /* WCAG AA minimum */

   /* -----------------------------------------------------------------------
     SEMANTIC COLOR TOKENS (abstract — mapped by theme files)
     Default fallbacks are neutral greys so the page is usable without theme.
     ----------------------------------------------------------------------- */

   /* Text */
   --ds-ink: #1A1A2E;
   --ds-ink-soft: #4A4A6A;
   --ds-muted: #71717A;

   /* Surfaces */
   --ds-bg: #FFFFFF;
   --ds-bg-subtle: #F8F8FA;
   --ds-card: #FFFFFF;
   --ds-line: #E4E4E7;

   /* Brand (overridden by theme) */
   --ds-accent: #2563EB;
   --ds-accent-hover: #1D4ED8;
   --ds-accent-soft: rgba(37, 99, 235, 0.10);
   --ds-accent-text: #FFFFFF;

   /* Status — WCAG AA verified on white */
   --ds-ok: #0B6B37;
   --ds-ok-soft: #E6F5ED;
   --ds-ok-text: #065426;
   --ds-warn: #8A5300;
   --ds-warn-soft: #FFF4E0;
   --ds-warn-text: #6B3F00;
   --ds-danger: #C41C1C;
   --ds-danger-soft: #FDE8E8;
   --ds-danger-text: #991B1B;
   --ds-info: #0369A1;
   --ds-info-soft: #E0F2FE;
   --ds-info-text: #075985;
}

/* -----------------------------------------------------------------------
   DARK MODE DEFAULTS (can be overridden by theme)
   ----------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
   :root {
      --ds-ink: #F0F0F5;
      --ds-ink-soft: #C0C0D0;
      --ds-muted: #8888A0;
      --ds-bg: #0F0F1A;
      --ds-bg-subtle: #1A1A2E;
      --ds-card: #1E1E32;
      --ds-line: #2E2E48;
      --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, .20);
      --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, .25);
      --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, .35);
   }
}