/* ============================================================================
   STORYMINERS DESIGN TOKENS
   Source of truth for all visual design decisions across Forge, RAD, and
   future Storyminers tools. Extracted from Brand Guidelines v4.

   Usage: @import url('./shared/design-tokens.css'); at top of any app
   ============================================================================ */

:root {

  /* --------------------------------------------------------------------------
     COLOR — Primary
     Orange = energy, invigoration, clarity (most recognizable brand color)
     Navy = sophistication, trust (foundation tone)
     -------------------------------------------------------------------------- */
  --color-primary: #EB7019;            /* Orange 200 — primary brand color */
  --color-primary-light: #F4923F;      /* Orange tint for hover states */
  --color-primary-dark: #C45C10;       /* Orange shade for active states */

  --color-foundation: #002864;         /* Navy Blue 200 — foundation tone */
  --color-foundation-light: #0042AB;   /* Navy Blue 100 */
  --color-foundation-dark: #001F50;    /* Navy Blue 300 */

  --color-white: #FCFCFC;             /* Brand white */

  /* --------------------------------------------------------------------------
     COLOR — Secondary
     Applied to subheadings, UI elements (buttons), icons, data viz
     -------------------------------------------------------------------------- */
  --color-secondary-burgundy: #66101F; /* Deep Burgundy 300 */
  --color-secondary-blue: #218BD3;     /* Steel Blue 200 */
  --color-secondary-slate: #D0D3D8;    /* Pale Slate 200 */

  /* --------------------------------------------------------------------------
     COLOR — Accent
     Depth and highlights. Use sparingly with a primary or secondary color.
     -------------------------------------------------------------------------- */
  --color-accent-orange-light: #EB7019;  /* Orange 100 */
  --color-accent-orange-dark: #EB7019;   /* Orange 300 */

  --color-accent-navy-light: #0042AB;    /* Navy Blue 100 */
  --color-accent-navy-dark: #001F50;     /* Navy Blue 300 */

  --color-accent-burgundy-light: #CC2243; /* Deep Burgundy 100 */
  --color-accent-burgundy-mid: #96162C;   /* Deep Burgundy 200 */

  --color-accent-steel-light: #43ACF3;    /* Steel Blue 100 */
  --color-accent-steel-dark: #005AA4;     /* Steel Blue 300 */

  /* --------------------------------------------------------------------------
     COLOR — Neutral (Pale Slate system)
     Grounding, breathing room. Borders, dividers, backgrounds.
     -------------------------------------------------------------------------- */
  --color-neutral-100: #ECEFF4;   /* Lightest — subtle backgrounds */
  --color-neutral-200: #D0D3D8;   /* Borders, dividers */
  --color-neutral-300: #ACAFB2;   /* Disabled text, placeholders */
  --color-neutral-400: #87898C;   /* Secondary text */
  --color-neutral-500: #626466;   /* Body text (secondary) */
  --color-neutral-600: #46494C;   /* Body text (primary) */
  --color-neutral-700: #333538;   /* Headings */
  --color-neutral-800: #151515;   /* Used as "black" text */

  /* --------------------------------------------------------------------------
     COLOR — Semantic (derived from brand palette)
     -------------------------------------------------------------------------- */
  --color-success: #2E7D32;        /* Confirmation, declared state */
  --color-success-light: #E8F5E9;  /* Success background */
  --color-warning: #EB7019;        /* Uses primary orange — warnings feel on-brand */
  --color-warning-light: #FFF3E0;  /* Warning background */
  --color-error: #CC2243;          /* Uses accent burgundy — serious but not alien */
  --color-error-light: #FDEDEF;    /* Error background */
  --color-info: #218BD3;           /* Uses secondary steel blue */
  --color-info-light: #E3F2FD;     /* Info background */

  /* --------------------------------------------------------------------------
     COLOR — Surface & Background
     -------------------------------------------------------------------------- */
  --color-surface: #FCFCFC;        /* Card/panel backgrounds */
  --color-surface-raised: #FFFFFF; /* Elevated surfaces */
  --color-background: #F5F6F8;     /* Page background — slightly warm slate */
  --color-background-alt: #ECEFF4; /* Alternate sections — neutral-100 */

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     Inria Serif: headlines (modern strategic thinking, intellectual rigor)
     Figtree: everything else (warm, approachable, clear)
     -------------------------------------------------------------------------- */

  /* Font families */
  --font-headline: "Inria Serif", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale — Digital (from brand guidelines) */
  --text-headline: 48px;      /* Inria Serif Regular, 130% leading */
  --text-subhead-1: 36px;     /* Figtree SemiBold, 124% leading */
  --text-subhead-2: 28px;     /* Figtree SemiBold, 130% leading */
  --text-subhead-3: 20px;     /* Figtree SemiBold, 130% leading */
  --text-body: 16px;          /* Figtree Regular, 140% leading, +10 tracking */
  --text-body-small: 14px;    /* UI labels, sidebar text */
  --text-cta: 16px;           /* Figtree SemiBold, 100% leading, +10 tracking */
  --text-annotation: 12px;    /* Figtree Light, 140% leading, uppercase */
  --text-micro: 11px;         /* Badges, status indicators */

  /* Line heights */
  --leading-tight: 1.24;      /* Subhead 1 */
  --leading-normal: 1.3;      /* Headlines, subheads 2-3 */
  --leading-relaxed: 1.4;     /* Body text */
  --leading-loose: 1.6;       /* Long-form reading */

  /* Letter spacing */
  --tracking-body: 0.01em;    /* +10 tracking for body */
  --tracking-label: 0.05em;   /* Section labels, uppercase text */
  --tracking-tight: -0.01em;  /* Headlines */

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

  /* --------------------------------------------------------------------------
     BORDERS
     -------------------------------------------------------------------------- */
  --radius-sm: 4px;           /* Buttons, badges, inputs */
  --radius-md: 8px;           /* Cards, panels */
  --radius-lg: 12px;          /* Modals, large containers */
  --radius-xl: 20px;          /* Boundary rectangle in RAD */
  --radius-full: 9999px;      /* Pills, avatars */

  --border-default: 1px solid var(--color-neutral-200);
  --border-strong: 1px solid var(--color-neutral-300);
  --border-focus: 2px solid var(--color-foundation-light);
  --border-accent: 2px solid var(--color-primary);

  /* --------------------------------------------------------------------------
     SHADOWS — Elevation levels
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(21, 21, 21, 0.06);
  --shadow-md: 0 4px 12px rgba(21, 21, 21, 0.08);
  --shadow-lg: 0 8px 24px rgba(21, 21, 21, 0.12);
  --shadow-xl: 0 16px 48px rgba(21, 21, 21, 0.16);

  /* --------------------------------------------------------------------------
     MOTION — Durations & easings
     "Focused, steady, deliberate" — brand feeling
     -------------------------------------------------------------------------- */
  --duration-fast: 150ms;      /* Hover states, toggles */
  --duration-normal: 250ms;    /* Panel transitions */
  --duration-slow: 400ms;      /* Modal enter/exit */
  --duration-ceremony: 600ms;  /* Declaration ceremony, special moments */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------------------------------
     Z-INDEX — Layering
     -------------------------------------------------------------------------- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 1000;
  --z-ceremony: 2000;
  --z-toast: 3000;

  /* --------------------------------------------------------------------------
     LAYOUT — App structure
     -------------------------------------------------------------------------- */
  --toolbar-height: 56px;
  --sidebar-width: 280px;
  --tab-bar-height: 44px;
  --content-max-width: 1200px;

  /* --------------------------------------------------------------------------
     COMPONENT TOKENS — Semantic mappings
     These connect raw tokens to specific UI purposes
     -------------------------------------------------------------------------- */

  /* Buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: var(--color-white);
  --btn-primary-hover: var(--color-primary-dark);

  --btn-secondary-bg: var(--color-neutral-100);
  --btn-secondary-text: var(--color-neutral-700);
  --btn-secondary-hover: var(--color-neutral-200);
  --btn-secondary-border: var(--color-neutral-200);

  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--color-neutral-600);
  --btn-ghost-hover: var(--color-neutral-100);

  --btn-danger-bg: var(--color-error);
  --btn-danger-text: var(--color-white);

  /* Inputs */
  --input-bg: var(--color-surface-raised);
  --input-border: var(--color-neutral-200);
  --input-focus-border: var(--color-foundation-light);
  --input-focus-ring: rgba(0, 66, 171, 0.15);
  --input-placeholder: var(--color-neutral-300);
  --input-text: var(--color-neutral-800);

  /* Cards */
  --card-bg: var(--color-surface);
  --card-border: var(--color-neutral-200);
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  /* Toolbar */
  --toolbar-bg: var(--color-surface-raised);
  --toolbar-border: var(--color-neutral-200);
  --toolbar-text: var(--color-neutral-700);

  /* State badges */
  --badge-empty-bg: var(--color-neutral-200);
  --badge-empty-text: var(--color-neutral-500);
  --badge-suggested-bg: var(--color-secondary-blue);
  --badge-suggested-text: var(--color-white);
  --badge-discussed-bg: var(--color-primary);
  --badge-discussed-text: var(--color-white);
  --badge-confirmed-bg: var(--color-success);
  --badge-confirmed-text: var(--color-white);

  /* Declaration ceremony */
  --ceremony-bg: rgba(0, 40, 100, 0.95);  /* Navy-based overlay */
  --ceremony-border: var(--color-primary);
  --ceremony-text: var(--color-primary);
  --ceremony-glow: rgba(235, 112, 25, 0.3);

  /* Voice indicator */
  --voice-idle-bg: var(--color-neutral-100);
  --voice-idle-text: var(--color-neutral-500);
  --voice-listening-bg: var(--color-warning-light);
  --voice-listening-text: var(--color-primary);
  --voice-done-bg: var(--color-success-light);
  --voice-done-text: var(--color-success);

  /* RAD canvas zones — mapped to brand palette */
  --zone-foundation: #E8F5E9;
  --zone-context: #FFF3E0;
  --zone-growth: var(--color-info-light);
  --zone-governance: #F3E5F5;
  --zone-external: var(--color-neutral-100);

  /* Callout palette — 6 colors derived from brand */
  --callout-0: rgba(235, 112, 25, 0.35);   /* Orange */
  --callout-1: rgba(46, 125, 50, 0.35);    /* Green */
  --callout-2: rgba(33, 139, 211, 0.35);   /* Steel Blue */
  --callout-3: rgba(150, 22, 44, 0.35);    /* Burgundy */
  --callout-4: rgba(0, 66, 171, 0.35);     /* Navy */
  --callout-5: rgba(67, 172, 243, 0.35);   /* Light Steel */
}

/* ============================================================================
   FONT IMPORTS
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:wght@400;700&display=swap');

/* ============================================================================
   BASE RESET — Optional, apps can include or skip
   ============================================================================ */
.sm-base {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  color: var(--color-neutral-700);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   UTILITY CLASSES — Common patterns
   ============================================================================ */

/* Headlines */
.sm-headline {
  font-family: var(--font-headline);
  font-size: var(--text-headline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-800);
}

.sm-subhead-1 {
  font-family: var(--font-body);
  font-size: var(--text-subhead-1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-neutral-800);
}

.sm-subhead-2 {
  font-family: var(--font-body);
  font-size: var(--text-subhead-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-neutral-800);
}

.sm-subhead-3 {
  font-family: var(--font-body);
  font-size: var(--text-subhead-3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-neutral-700);
}

.sm-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  color: var(--color-neutral-600);
}

.sm-annotation {
  font-family: var(--font-body);
  font-size: var(--text-annotation);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.sm-label {
  font-family: var(--font-body);
  font-size: var(--text-annotation);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-neutral-500);
}