/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  Motif Hub — Design Tokens v1.0                             ║
 * ║  Single source of truth for all visual properties          ║
 * ║                                                              ║
 * ║  Usage:                                                      ║
 * ║    index.html      → <link href="design/tokens.css">        ║
 * ║    molecule/       → <link href="../design/tokens.css">     ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ── @property registrations (enables CSS transitions on custom props) ── */

@property --grad-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --grad-a    { syntax: '<color>';  initial-value: #d946ef; inherits: true; }
@property --grad-b    { syntax: '<color>';  initial-value: #8b5cf6; inherits: true; }
@property --grad-c    { syntax: '<color>';  initial-value: #06b6d4; inherits: true; }
@property --accent    { syntax: '<color>';  initial-value: #8b5cf6; inherits: true; }
@property --anim-spd  { syntax: '<number>'; initial-value: 1;       inherits: true; }


/* ════════════════════════════════════════════════════════════════
   ROOT TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {

  /* ── COLOR: Base ─────────────────────────────────────────────── */
  --bg: #000000;

  /* Surface layers (white-on-black overlays) */
  --surface:        rgba(255,255,255,0.03);
  --surface-hover:  rgba(255,255,255,0.06);
  --surface-active: rgba(255,255,255,0.09);

  /* Borders */
  --border:         rgba(255,255,255,0.10);
  --border-hover:   rgba(255,255,255,0.18);
  --border-dashed:  rgba(255,255,255,0.14);

  /* Text */
  --text:           #ededed;
  --text-secondary: #888888;
  --text-muted:     #555555;

  /* ── COLOR: Accent — purple ──────────────────────────────────── */
  --accent:         #8b5cf6;
  --accent-hover:   #a78bfa;

  /* Accent opacity scale */
  --accent-5:       rgba(139,92,246,0.05);
  --accent-10:      rgba(139,92,246,0.10);
  --accent-15:      rgba(139,92,246,0.15);
  --accent-20:      rgba(139,92,246,0.20);
  --accent-35:      rgba(139,92,246,0.35);
  --accent-60:      rgba(139,92,246,0.60);

  /* ── COLOR: Semantic — green (success / active) ──────────────── */
  --green:          #39d353;
  --green-10:       rgba(57,211,83,0.10);
  --green-20:       rgba(57,211,83,0.20);
  --green-30:       rgba(57,211,83,0.30);

  /* ── COLOR: Semantic — red (error / delete) ─────────────────── */
  --red:            #ef4444;
  --red-10:         rgba(239,68,68,0.10);
  --red-30:         rgba(239,68,68,0.30);

  /* ── COLOR: Gradient ─────────────────────────────────────────── */
  --grad-a:         #d946ef;   /* magenta */
  --grad-b:         #8b5cf6;   /* purple  */
  --grad-c:         #06b6d4;   /* cyan    */
  --grad-angle:     135deg;
  --grad-accent:    linear-gradient(var(--grad-angle), var(--grad-a), var(--grad-b), var(--grad-c));

  /* ── COLOR: Overlays (dark backgrounds at opacity) ───────────── */
  --overlay-sm:     rgba(0,0,0,0.40);   /* light scrim     */
  --overlay-md:     rgba(0,0,0,0.65);   /* modal backdrop  */
  --overlay-lg:     rgba(0,0,0,0.85);   /* auth / full     */

  /* ── COLOR: Component surfaces ──────────────────────────────── */
  --surface-modal:  #0d0d14;             /* modals, toasts  */
  --surface-card:   rgba(10,10,10,0.97); /* login, menus    */


  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */
  --font-body:      system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;
  --font-ui:        var(--font-body);   /* @deprecated — usar --font-body */

  /* Font size scale */
  --text-xs:        10px;
  --text-sm:        12px;
  --text-base:      14px;
  --text-md:        1rem;    /* 16px */
  --text-lg:        1.5rem;  /* 24px */

  /* Font weights */
  --fw-normal:      400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;


  /* ── BORDER RADIUS ───────────────────────────────────────────── */
  --radius-xs:      4px;      /* checkboxes, tiny chips        */
  --radius-sm:      6px;      /* icon buttons, inline tags     */
  --radius-md:      8px;      /* inputs, task items, btn-modal */
  --radius-lg:      12px;     /* panels, modals, cards         */
  --radius-xl:      16px;     /* theme popup                   */
  --radius-full:    9999px;   /* pills, circles                */

  /* Legacy alias — keep for backward compat */
  --radius:         var(--radius-lg);


  /* ── SHADOWS ─────────────────────────────────────────────────── */
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.30);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:        0 24px 64px rgba(0,0,0,0.70);

  /* Focus rings */
  --shadow-focus:     0 0 0 2px rgba(139,92,246,0.20);
  --shadow-focus-lg:  0 0 0 3px rgba(139,92,246,0.15);

  /* Glow effects */
  --shadow-glow-accent: 0 0 24px rgba(139,92,246,0.15);
  --shadow-glow-green:  0 0 10px rgba(57,211,83,0.40);

  /* Panel / card shadows */
  --shadow-panel:     inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 32px rgba(0,0,0,0.35);
  --shadow-modal:     0 24px 80px rgba(0,0,0,0.70);


  /* ── BACKDROP BLUR ───────────────────────────────────────────── */
  --blur-sm:  blur(6px);
  --blur-md:  blur(12px);
  --blur-lg:  blur(18px);
  --blur-xl:  blur(24px);


  /* ── TRANSITIONS ─────────────────────────────────────────────── */
  --transition:       0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --tr:               var(--transition);  /* @deprecated — usar --transition */
  --anim-spd:         1;


  /* ── Z-INDEX STACK ───────────────────────────────────────────── */
  --z-base:       1;
  --z-raised:     5;
  --z-sidebar:    10;
  --z-ctx-menu:   50;
  --z-sticky:     100;
  --z-modal:      200;
  --z-popup:      300;
  --z-top:        500;
  --z-toast:      999;
}