/* ==========================================================================
   Zylink Corp Dashboard — Design Tokens
   Single source of truth for all custom properties.
   Supports: light mode (default), dark mode via [data-theme] + prefers-color-scheme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY
   -------------------------------------------------------------------------- */
:root {
  /* Font stack */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;

  /* Type scale — sizes (rem, 16px base) */
  --font-size-display:   2.125rem;  /* 34px */
  --font-size-title1:    1.75rem;   /* 28px */
  --font-size-title2:    1.375rem;  /* 22px */
  --font-size-title3:    1.25rem;   /* 20px */
  --font-size-headline:  1.0625rem; /* 17px */
  --font-size-body:      1.0625rem; /* 17px */
  --font-size-callout:   1rem;      /* 16px */
  --font-size-subhead:   0.9375rem; /* 15px */
  --font-size-footnote:  0.8125rem; /* 13px */
  --font-size-caption:   0.75rem;   /* 12px */

  /* Type scale — line-heights */
  --line-height-display:  2.5625rem; /* 41px */
  --line-height-title1:   2.125rem;  /* 34px */
  --line-height-title2:   1.75rem;   /* 28px */
  --line-height-title3:   1.5625rem; /* 25px */
  --line-height-headline: 1.375rem;  /* 22px */
  --line-height-body:     1.375rem;  /* 22px */
  --line-height-callout:  1.3125rem; /* 21px */
  --line-height-subhead:  1.25rem;   /* 20px */
  --line-height-footnote: 1.125rem;  /* 18px */
  --line-height-caption:  1rem;      /* 16px */

  /* Type scale — letter-spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:   0.01em;

  /* Font weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
}

/* --------------------------------------------------------------------------
   2. SPACING (8pt grid)
   -------------------------------------------------------------------------- */
:root {
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* Layout */
  --max-content-width: 1120px;
  --mobile-padding: var(--space-4);  /* 16px, can bump to 20px in component context */
}

/* --------------------------------------------------------------------------
   3. BORDER RADIUS
   -------------------------------------------------------------------------- */
:root {
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   4. MOTION
   -------------------------------------------------------------------------- */
:root {
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
}

/* --------------------------------------------------------------------------
   5. SURFACES & DEPTH
   -------------------------------------------------------------------------- */
:root {
  /* Shadows — modals / popovers only */
  --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.08);

  /* Glass / blur — nav bar, chat input, modals over content ONLY */
  --glass-blur: blur(20px) saturate(180%);
  --glass-background: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   6. COLORS — LIGHT MODE (default)
   -------------------------------------------------------------------------- */
:root {
  /* Text */
  --color-text-primary:   #1d1d1f;
  --color-text-secondary: #86868b;

  /* Surfaces */
  --color-background:     #f5f5f7;
  --color-surface:        #ffffff;
  --color-border:         rgba(0, 0, 0, 0.06);

  /* Accent */
  --color-accent:        #0071e3;
  --color-accent-hover:  #0077ed;

  /* Status */
  --color-status-done:        #34c759;
  --color-status-in-progress: #ff9500;
  --color-status-blocked:     #ff3b30;
  --color-status-not-started: #8e8e93;

  /* Semantic overlays */
  --color-overlay: rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   7. DARK MODE — Manual override via data-theme attribute
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Text */
  --color-text-primary:   #f5f5f7;
  --color-text-secondary: rgba(235, 235, 245, 0.6);

  /* Surfaces */
  --color-background:     #000000;
  --color-surface:        #1c1c1e;
  --color-border:         rgba(255, 255, 255, 0.08);

  /* Accent */
  --color-accent:        #0a84ff;
  --color-accent-hover:  #409cff;

  /* Status */
  --color-status-done:        #30d158;
  --color-status-in-progress: #ff9f0a;
  --color-status-blocked:     #ff453a;
  --color-status-not-started: #636366;

  /* Surfaces & depth overrides */
  --shadow-elevated:  0 8px 30px rgba(0, 0, 0, 0.3);
  --glass-background: rgba(28, 28, 30, 0.72);

  /* Semantic overlays */
  --color-overlay: rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   8. DARK MODE — Auto preference (when no manual theme is set)
       Uses :not([data-theme]) so we don't double-apply if manual theme exists.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Text */
    --color-text-primary:   #f5f5f7;
    --color-text-secondary: rgba(235, 235, 245, 0.6);

    /* Surfaces */
    --color-background:     #000000;
    --color-surface:        #1c1c1e;
    --color-border:         rgba(255, 255, 255, 0.08);

    /* Accent */
    --color-accent:        #0a84ff;
    --color-accent-hover:  #409cff;

    /* Status */
    --color-status-done:        #30d158;
    --color-status-in-progress: #ff9f0a;
    --color-status-blocked:     #ff453a;
    --color-status-not-started: #636366;

    /* Surfaces & depth overrides */
    --shadow-elevated:  0 8px 30px rgba(0, 0, 0, 0.3);
    --glass-background: rgba(28, 28, 30, 0.72);

    /* Semantic overlays */
    --color-overlay: rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
    --ease-standard: linear;
    --ease-spring:   linear;
  }
}