/**
 * Winny Speaking — Design System v1 Tokens
 * Canonical source of truth for brand colors, typography, spacing, and interaction states.
 * Other web surfaces (website, backoffice, emails, future apps) should mirror or override
 * these tokens as needed while keeping this file as the authoritative reference.
 *
 * Surfaces: Website · Backoffice · Emails · Future web apps
 * Last updated: WIN-PROP-018
 */

:root {
  /* ─── Brand Colors: Foundation & Trust ─────────────────────────────────── */
  --winny-foundation-depth:   #02090C;  /* Primary dark background — grounding, focus   */
  --winny-professional-trust: #07161D;  /* Elevated surface — credibility, depth         */

  /* ─── Brand Colors: Growth & Energy ────────────────────────────────────── */
  --winny-growth-momentum:    #1AA3AD;  /* Progress indicators, secondary actions        */
  --winny-breakthrough-energy:#34E6DC;  /* Primary CTAs, achievements, clarity moments   */
  --winny-success-illumination:#78F5DD; /* Milestones, success celebrations              */

  /* ─── Brand Colors: Achievement & Warmth ───────────────────────────────── */
  --winny-confidence-gold:    #F4BA34;  /* Scores, completions, achievement badges       */
  --winny-pulse-amber:        #FFCF5A;  /* Celebration effects, energy accents           */

  /* ─── Text ──────────────────────────────────────────────────────────────── */
  --winny-text-primary:       #EBFFFB;  /* Primary readable text                        */
  --winny-text-secondary:     #9BC4C8;  /* Supporting text, descriptions                */
  --winny-text-accent:        #78F5DD;  /* Highlighted inline text                      */

  /* ─── Surfaces & Borders ────────────────────────────────────────────────── */
  --winny-border-subtle:      rgba(52, 230, 220, 0.12);  /* Default card borders       */
  --winny-border-prominent:   rgba(52, 230, 220, 0.30);  /* Focused / active borders   */
  --winny-border-interactive: rgba(52, 230, 220, 0.50);  /* Hover / selected borders   */
  --winny-surface-card:       rgba(5, 18, 24, 0.82);     /* Card fill                  */
  --winny-surface-elevated:   rgba(7, 22, 29, 0.95);     /* Elevated panel fill        */
  --winny-surface-interactive:rgba(26, 163, 173, 0.15);  /* Interactive element fill   */
  --winny-surface-input:      rgba(2, 9, 12, 0.65);      /* Input field backgrounds    */

  /* ─── Shadows ───────────────────────────────────────────────────────────── */
  --winny-shadow-soft:        0 8px 24px rgba(0, 0, 0, 0.18);
  --winny-shadow-elevated:    0 16px 48px rgba(0, 0, 0, 0.28);
  --winny-shadow-primary-cta: 0 10px 28px rgba(52, 230, 220, 0.28);
  --winny-shadow-gold:        0 8px 32px rgba(244, 186, 52, 0.30);
  --winny-shadow-glow-teal:   0 0 20px rgba(52, 230, 220, 0.20);

  /* ─── Gradients ─────────────────────────────────────────────────────────── */
  --winny-gradient-primary:   linear-gradient(135deg, var(--winny-breakthrough-energy), var(--winny-growth-momentum));
  --winny-gradient-gold:      linear-gradient(135deg, var(--winny-confidence-gold), var(--winny-pulse-amber));
  --winny-gradient-bg:        linear-gradient(180deg, #041118 0%, var(--winny-foundation-depth) 100%);
  --winny-gradient-card:      linear-gradient(135deg, rgba(52, 230, 220, 0.08), rgba(2, 9, 12, 0.92) 42%);

  /* ─── Typography ────────────────────────────────────────────────────────── */
  --winny-font-primary:       "SF Pro Rounded", "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  --winny-font-mono:          "SF Mono", "Fira Code", "Consolas", monospace;

  /* ─── Radius ────────────────────────────────────────────────────────────── */
  --winny-radius-sm:  10px;
  --winny-radius-md:  16px;
  --winny-radius-lg:  24px;
  --winny-radius-xl:  32px;
  --winny-radius-pill: 999px;

  /* ─── Spacing scale (4-pt base) ─────────────────────────────────────────── */
  --winny-space-1:  4px;
  --winny-space-2:  8px;
  --winny-space-3:  12px;
  --winny-space-4:  16px;
  --winny-space-5:  20px;
  --winny-space-6:  24px;
  --winny-space-8:  32px;
  --winny-space-10: 40px;
  --winny-space-12: 48px;
  --winny-space-16: 64px;

  /* ─── Semantic State Colors ─────────────────────────────────────────────── */
  --winny-state-success-text:   #d5fff1;
  --winny-state-success-bg:     rgba(45, 181, 128, 0.16);
  --winny-state-success-border: rgba(109, 232, 183, 0.32);

  --winny-state-warning-text:   #ffe7b5;
  --winny-state-warning-bg:     rgba(255, 184, 77, 0.16);
  --winny-state-warning-border: rgba(255, 204, 112, 0.30);

  --winny-state-error-text:     #ffd3d7;
  --winny-state-error-bg:       rgba(255, 63, 63, 0.16);
  --winny-state-error-border:   rgba(255, 121, 127, 0.45);

  --winny-state-info-text:      var(--winny-text-secondary);
  --winny-state-info-bg:        var(--winny-surface-interactive);
  --winny-state-info-border:    var(--winny-border-subtle);

  /* ─── Focus ring ────────────────────────────────────────────────────────── */
  --winny-focus-ring: 0 0 0 3px rgba(52, 230, 220, 0.55);
}