/**
 * Force101 "Workflow Lime" Design System - CSS Custom Properties
 * 
 * Reference: force101-www/DESIGN-SYSTEM.md
 * 
 * Usage:
 *   @import url('design-tokens.css');
 *   or
 *   <link rel="stylesheet" href="css/design-tokens.css">
 * 
 * Then use: var(--color-accent), var(--spacing-card-padding), etc.
 */

:root {
  /* ============================================
     BRAND COLORS
     ============================================ */
  --brand-navy: #516379;   /* main brand color, headings, logo text */
  --brand-teal: #5D9076;   /* primary accent (CTAs, sliders, progress) */
  --brand-blue: #4C6D93;   /* secondary accent (tabs, selected states) */
  --brand-olive: #9B9F6D;  /* supporting accent (tags, charts) */
  --brand-pink: #C98E86;   /* supporting accent (tags, charts) */
  --brand-lilac: #B8A0C7;  /* supporting accent (tags, charts) */

  /* ============================================
     BACKGROUND & SURFACE COLORS
     ============================================ */
  --color-canvas: #DDEAA5;      /* soft lime background */
  --color-surface: #FFFFFF;      /* cards */
  --color-surface-alt: #F6F7FB;  /* inputs, subtle panels */

  /* ============================================
     TEXT COLORS
     ============================================ */
  --color-text-main: var(--brand-navy);  /* #516379 */
  --color-text-muted: #6E7781;
  --color-text-soft: #A0A7B0;

  /* ============================================
     ACCENT COLORS
     ============================================ */
  --color-accent: var(--brand-teal);     /* #5D9076 */
  --color-accent-soft: #E0F0E8;
  --color-accent-alt: var(--brand-blue); /* #4C6D93 */

  /* ============================================
     DATA SERIES COLORS (for charts, tags, multi-series visuals)
     ============================================ */
  --color-data-1: var(--brand-teal);  /* #5D9076 */
  --color-data-2: var(--brand-blue);  /* #4C6D93 */
  --color-data-3: var(--brand-olive); /* #9B9F6D */
  --color-data-4: var(--brand-pink);  /* #C98E86 */
  --color-data-5: var(--brand-lilac); /* #B8A0C7 */

  /* ============================================
     SEMANTIC COLORS
     ============================================ */
  --color-success: var(--brand-teal);  /* #5D9076 */
  --color-warning: #FFC857;
  --color-danger: #D45B5B;
  --color-border-subtle: #E0E4ED;

  /* ============================================
     SPACING SCALE (4px base unit)
     ============================================ */
  --spacing-base: 4px;
  --spacing-xs: calc(var(--spacing-base) * 1);   /* 4px */
  --spacing-sm: calc(var(--spacing-base) * 2);   /* 8px */
  --spacing-md: calc(var(--spacing-base) * 4);   /* 16px */
  --spacing-lg: calc(var(--spacing-base) * 6);   /* 24px */
  --spacing-xl: calc(var(--spacing-base) * 8);   /* 32px */
  --spacing-2xl: calc(var(--spacing-base) * 12); /* 48px */
  
  /* Common spacing values */
  --spacing-card-padding: var(--spacing-lg);     /* 24px */
  --spacing-component-gap: var(--spacing-md);    /* 16px */
  --spacing-section-gap: var(--spacing-xl);      /* 32px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-card: 20px;      /* 18-24px range, cards */
  --radius-button: 12px;    /* medium, buttons */
  --radius-pill: 999px;     /* full pills, chips, toggles */
  --radius-sm: 6px;         /* small elements */

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-size-heading: 18px;
  --font-size-heading-lg: 20px;
  --font-size-body: 14px;
  --font-size-body-lg: 15px;
  --font-size-caption: 12px;
  
  --font-weight-heading: 600;
  --font-weight-body: 400;
  --font-weight-medium: 500;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 4px 12px rgba(93, 144, 118, 0.2); /* teal shadow for hover */

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */
  --transition-base: 150ms ease-out;
  --transition-slow: 200ms ease-out;
  --transition-fast: 100ms ease-out;

  /* ============================================
     LAYOUT
     ============================================ */
  --container-max-width: 1200px;
  --grid-columns-desktop: 4;  /* 3-4 cards per row on desktop */
  --grid-gap: var(--spacing-lg); /* 24px */
}

/* ============================================
   UTILITY CLASSES (Optional - use as needed)
   ============================================ */

/* Background utilities */
.bg-canvas { background-color: var(--color-canvas); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-alt { background-color: var(--color-surface-alt); }

/* Text color utilities */
.text-main { color: var(--color-text-main); }
.text-muted { color: var(--color-text-muted); }
.text-soft { color: var(--color-text-soft); }

/* Accent color utilities */
.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-soft { background-color: var(--color-accent-soft); }

/* Border utilities */
.border-subtle { border-color: var(--color-border-subtle); }