/* ==========================================================================
   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);
  }
}