/**
 * Flow Collective Studio — Design Tokens as CSS Custom Properties
 * Generated from tokens.json v1.0
 * Single source of truth — all HTML/components should import this file.
 *
 * Naming convention: --flow-{category}-{group}-{name}
 * Never use raw values in components; always reference these variables.
 */

/* ============================================================
   REFERENCE PALETTE — raw values, don't use directly in markup
   ============================================================ */
:root {
  /* Green spectrum */
  --flow-ref-green-500: #3beb64;
  --flow-ref-green-600: #2fd954;
  --flow-ref-green-400: #72f18b;
  --flow-ref-green-300: #99f4a8;
  --flow-ref-green-200: #b8f7c3;

  /* Neutral spectrum */
  --flow-ref-neutral-cream: #f7f5f3;
  --flow-ref-neutral-offwhite: #f0eee9;
  --flow-ref-neutral-almostwhite: #f8f9f9;
  --flow-ref-neutral-border: #cfd5d3;
  --flow-ref-neutral-tertiary: #9faba7;
  --flow-ref-neutral-secondary: #768782;
  --flow-ref-neutral-darkgreen: #14382e;
  --flow-ref-neutral-charcoal: #0f2c24;
  --flow-ref-neutral-black: #06221a;

  /* ============================================================
     SEMANTIC TOKENS — use these in components
     ============================================================ */

  /* Surface */
  --flow-surface-primary: var(--flow-ref-neutral-cream);
  --flow-surface-secondary: var(--flow-ref-neutral-offwhite);
  --flow-surface-tertiary: var(--flow-ref-neutral-almostwhite);
  --flow-surface-inverse: var(--flow-ref-neutral-charcoal);
  --flow-surface-inverse-deep: var(--flow-ref-neutral-black);
  --flow-surface-accent: var(--flow-ref-green-500);

  /* Text */
  --flow-text-primary: var(--flow-ref-neutral-charcoal);
  --flow-text-secondary: var(--flow-ref-neutral-secondary);
  --flow-text-tertiary: var(--flow-ref-neutral-tertiary);
  --flow-text-inverse: var(--flow-ref-neutral-offwhite);
  --flow-text-inverse-secondary: var(--flow-ref-neutral-tertiary);
  --flow-text-accent: var(--flow-ref-green-500);

  /* Border */
  --flow-border-default: var(--flow-ref-neutral-border);
  --flow-border-active: var(--flow-ref-green-500);
  --flow-border-inverse: var(--flow-ref-neutral-darkgreen);

  /* Interactive */
  --flow-interactive-default: var(--flow-ref-green-500);
  --flow-interactive-hover: var(--flow-ref-green-600);
  --flow-interactive-light: var(--flow-ref-green-400);
  --flow-interactive-subtle: var(--flow-ref-green-300);

  /* Feedback */
  --flow-feedback-success: #2fd954;
  --flow-feedback-error: #e84545;
  --flow-feedback-warning: #f0a730;
  --flow-feedback-info: var(--flow-ref-neutral-secondary);

  /* ============================================================
     COMPONENT TOKENS
     ============================================================ */

  /* Button */
  --flow-button-bg: var(--flow-interactive-default);
  --flow-button-bg-hover: var(--flow-interactive-hover);
  --flow-button-text: var(--flow-ref-neutral-charcoal);

  /* Card */
  --flow-card-bg: var(--flow-surface-secondary);
  --flow-card-border: var(--flow-border-active);

  /* Input */
  --flow-input-bg: var(--flow-surface-primary);
  --flow-input-border: var(--flow-border-default);
  --flow-input-border-focus: var(--flow-interactive-default);

  /* Table */
  --flow-table-border: var(--flow-ref-neutral-border);
  --flow-table-header-bg: var(--flow-surface-secondary);
  --flow-table-row-alt: var(--flow-surface-tertiary);

  /* Section Divider */
  --flow-divider-bg: var(--flow-surface-inverse);
  --flow-divider-number: var(--flow-interactive-default);
  --flow-divider-title: var(--flow-text-inverse);

  /* Pull Quote */
  --flow-pullquote-border: var(--flow-interactive-default);
  --flow-pullquote-text: var(--flow-text-primary);
  --flow-pullquote-attribution: var(--flow-text-secondary);

  /* Impact Data */
  --flow-impact-number: var(--flow-text-primary);
  --flow-impact-accent-light: var(--flow-interactive-default);
  --flow-impact-accent-dark: var(--flow-text-inverse);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --flow-font-family: 'Lato', Arial, Helvetica, sans-serif;
  --flow-font-weight-black: 900;
  --flow-font-weight-bold: 700;
  --flow-font-weight-semibold: 600;
  --flow-font-weight-medium: 500;
  --flow-font-weight-regular: 400;
  --flow-font-weight-light: 300;

  /* Web scale */
  --flow-type-display-size: 64px;
  --flow-type-display-weight: 900;
  --flow-type-display-lh: 1.1;

  --flow-type-h1-size: 48px;
  --flow-type-h1-weight: 700;
  --flow-type-h1-lh: 1.15;

  --flow-type-h2-size: 36px;
  --flow-type-h2-weight: 600;
  --flow-type-h2-lh: 1.2;

  --flow-type-h3-size: 24px;
  --flow-type-h3-weight: 500;
  --flow-type-h3-lh: 1.3;

  --flow-type-body-size: 16px;
  --flow-type-body-weight: 400;
  --flow-type-body-lh: 1.6;

  --flow-type-caption-size: 13px;
  --flow-type-caption-weight: 300;
  --flow-type-caption-lh: 1.4;

  --flow-type-micro-size: 11px;
  --flow-type-micro-weight: 300;
  --flow-type-micro-lh: 1.3;

  /* ============================================================
     SPACING (8px base unit)
     ============================================================ */
  --flow-space-1: 4px;
  --flow-space-2: 8px;
  --flow-space-3: 16px;
  --flow-space-4: 24px;
  --flow-space-5: 32px;
  --flow-space-6: 48px;
  --flow-space-7: 64px;
  --flow-space-8: 96px;
  --flow-space-9: 128px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --flow-radius-none: 0px;
  --flow-radius-sm: 4px;
  --flow-radius-default: 8px;
  --flow-radius-md: 12px;
  --flow-radius-lg: 16px;
  --flow-radius-full: 50%;

  /* ============================================================
     ELEVATION — brand-tinted shadows (rgba charcoal, not black)
     ============================================================ */
  --flow-shadow-none: none;
  --flow-shadow-sm: 0 2px 4px rgba(15, 44, 36, 0.06);
  --flow-shadow-md: 0 4px 12px rgba(15, 44, 36, 0.08);
  --flow-shadow-lg: 0 8px 24px rgba(15, 44, 36, 0.12);

  /* ============================================================
     MOTION
     ============================================================ */
  --flow-duration-fast: 150ms;
  --flow-duration-default: 300ms;
  --flow-duration-slow: 500ms;
  --flow-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --flow-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --flow-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ============================================================
     OPACITY SCALE
     ============================================================ */
  --flow-opacity-0: 0;
  --flow-opacity-5: 0.05;
  --flow-opacity-10: 0.10;
  --flow-opacity-25: 0.25;
  --flow-opacity-50: 0.50;
  --flow-opacity-75: 0.75;
  --flow-opacity-90: 0.90;
  --flow-opacity-100: 1;

  /* ============================================================
     Z-INDEX SYSTEM
     ============================================================ */
  --flow-z-base: 0;
  --flow-z-raised: 1;
  --flow-z-dropdown: 100;
  --flow-z-sticky: 200;
  --flow-z-overlay: 300;
  --flow-z-modal: 400;
  --flow-z-toast: 500;
  --flow-z-tooltip: 600;

  /* ============================================================
     GRID / LAYOUT SYSTEM
     ============================================================ */
  --flow-grid-columns: 12;
  --flow-grid-gutter-mobile: 16px;
  --flow-grid-gutter-tablet: 24px;
  --flow-grid-gutter-desktop: 32px;
  --flow-grid-margin-mobile: 16px;
  --flow-grid-margin-tablet: 32px;
  --flow-grid-margin-desktop: 48px;
  --flow-grid-margin-wide: auto;
  --flow-container-sm: 640px;
  --flow-container-md: 768px;
  --flow-container-lg: 1024px;
  --flow-container-xl: 1280px;
  --flow-container-max: 1440px;

  /* ============================================================
     GRADIENTS
     ============================================================ */
  --flow-gradient-brand-glow: linear-gradient(135deg, #3beb64 0%, #72f18b 100%);
  --flow-gradient-dark-fade: linear-gradient(180deg, #0f2c24 0%, #06221a 100%);
  --flow-gradient-surface-warm: linear-gradient(180deg, #f7f5f3 0%, #f0eee9 100%);
  --flow-gradient-photo-scrim: linear-gradient(180deg, rgba(15,44,36,0) 0%, rgba(15,44,36,0.85) 100%);

  /* ============================================================
     BREAKPOINTS (for reference — use in @media)
     ============================================================ */
  --flow-bp-mobile: 0px;
  --flow-bp-tablet: 768px;
  --flow-bp-desktop: 1024px;
  --flow-bp-wide: 1440px;

  /* ============================================================
     ICONOGRAPHY
     ============================================================ */
  --flow-icon-stroke: 1.5px;
  --flow-icon-size-inline: 24px;
  --flow-icon-size-feature: 48px;

  /* ============================================================
     PHOTOGRAPHY
     ============================================================ */
  --flow-photo-overlay-dark: rgba(15, 44, 36, 0.75);
  --flow-photo-overlay-black: rgba(0, 0, 0, 0.50);
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */
body.dark-mode,
[data-theme="dark"] {
  --flow-surface-primary: var(--flow-ref-neutral-charcoal);
  --flow-surface-secondary: var(--flow-ref-neutral-darkgreen);
  --flow-surface-tertiary: var(--flow-ref-neutral-black);
  --flow-surface-inverse: var(--flow-ref-neutral-cream);

  --flow-text-primary: var(--flow-ref-neutral-offwhite);
  --flow-text-secondary: var(--flow-ref-neutral-tertiary);
  --flow-text-tertiary: var(--flow-ref-neutral-secondary);
  --flow-text-inverse: var(--flow-ref-neutral-charcoal);
  --flow-text-accent: var(--flow-ref-green-400);

  --flow-border-default: var(--flow-ref-neutral-darkgreen);
  --flow-border-active: var(--flow-ref-green-400);

  --flow-interactive-default: var(--flow-ref-green-400);
  --flow-interactive-hover: var(--flow-ref-green-500);

  --flow-card-bg: var(--flow-ref-neutral-darkgreen);
  --flow-card-border: var(--flow-ref-green-400);

  --flow-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.20);
  --flow-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --flow-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.30);
}