/* ==========================================================================
   Alfredo Studio — Design Tokens Core
   Semantic tokens (colors, spacing, shadows, motion, materials)
   Font loading kept separate per context (fonts in tokens.css for demos,
   in globals.css for React app).
   ========================================================================== */

/* ---------- Root Tokens (Dark theme — default) --------------------------- */
:root {

  /* ---- Typography Scales -------------------------------------------------- */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3.25rem;    /* 52px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.6;
  --lh-relaxed:  1.75;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-ultra:    0.15em;

  /* ---- Palette (Primitives) --------------------------------------------- */
  /* Neutrals — dark-first */
  --palette-neutral-50:   #e9e9ea;
  --palette-neutral-100:  #d7d8d9;
  --palette-neutral-200:  #c5c6c8;
  --palette-neutral-300:  #b3b5b7;
  --palette-neutral-400:  #a1a3a6;
  --palette-neutral-500:  #8f9295;
  --palette-neutral-600:  #7d8083;
  --palette-neutral-700:  #6b6e70;
  --palette-neutral-800:  #595b5e;
  --palette-neutral-900:  #444648;
  --palette-neutral-1000: #242526;

  /* Dark backgrounds */
  --palette-dark:  #0a0f1a;
  --palette-void:  #060a12;
  --palette-alt:   #1a1525;

  /* Cyan (brand primary accent) */
  --palette-cyan-400:  #76ffff;
  --palette-cyan-500:  #41d9d9;
  --palette-cyan-600:  #2bb8b8;
  --palette-cyan-700:  #1f9999;

  /* Pink (secondary accent) */
  --palette-pink-400:  #d9a0c9;
  --palette-pink-500:  #c87db5;
  --palette-pink-600:  #a85d96;

  /* Gold (tertiary accent) */
  --palette-gold-400:  #f5d76e;
  --palette-gold-500:  #e5c44e;
  --palette-gold-600:  #c4a530;

  /* Status */
  --palette-red-500:    #f75942;
  --palette-red-600:    #dc2626;
  --palette-green-400:  #22c55e;
  --palette-green-500:  #16a34a;
  --palette-blue-500:   #3b82f6;
  --palette-orange-400: #ffb464;

  /* ---- Semantic Colors -------------------------------------------------- */
  --color-bg:              var(--palette-dark);
  --color-bg-alt:          var(--palette-alt);
  --color-surface-1:       rgba(255, 255, 255, 0.03);
  --color-surface-2:       rgba(255, 255, 255, 0.06);
  --color-surface-3:       rgba(255, 255, 255, 0.10);
  --color-surface-nav:     rgba(10, 15, 26, 0.95);

  --color-text:            #e0e0e0;
  --color-text-strong:     #ffffff;
  --color-text-secondary:  rgba(255, 255, 255, 0.7);
  --color-text-tertiary:   rgba(255, 255, 255, 0.5);
  --color-text-muted:      rgba(255, 255, 255, 0.4);
  --color-text-faint:      rgba(255, 255, 255, 0.3);

  --color-accent:           var(--palette-cyan-500);
  --color-accent-bright:    var(--palette-cyan-400);
  --color-accent-dim:       var(--palette-cyan-700);
  --color-accent-bg:        rgba(65, 217, 217, 0.15);
  --color-accent-bg-subtle: rgba(65, 217, 217, 0.08);
  --color-accent-secondary: var(--palette-pink-400);
  --color-accent-tertiary:  var(--palette-gold-400);

  --color-border:          rgba(255, 255, 255, 0.08);
  --color-border-hover:    rgba(255, 255, 255, 0.15);
  --color-border-accent:   rgba(65, 217, 217, 0.3);
  --color-border-accent-strong: rgba(65, 217, 217, 0.4);

  --color-error:   var(--palette-red-500);
  --color-success: var(--palette-green-400);
  --color-warning: var(--palette-orange-400);
  --color-info:    var(--palette-blue-500);

  /* ---- shadcn bridge tokens (no direct demo equivalent) ----------------- */
  /* Card is a solid elevated surface — not a glass layer like surface-1/2   */
  --color-card:        oklch(0.2077 0.0398 265.7549);
  --color-popover:     var(--color-card);
  --color-ring:        var(--color-accent);
  --color-input:       var(--color-border);
  --color-destructive: oklch(0.4437 0.1613 26.8994);
  --color-secondary:   var(--color-surface-2);

  /* Brand gradient */
  --gradient-brand: linear-gradient(90deg,
    var(--palette-cyan-500),
    var(--palette-pink-400),
    var(--palette-gold-400)
  );

  /* ---- Spacing (adapted from Figma spacing-mode-1) ---------------------- */
  --space-xxxs:  0.125rem;  /*  2px */
  --space-xxs:   0.25rem;   /*  4px */
  --space-xs:    0.5rem;    /*  8px */
  --space-sm:    0.75rem;   /* 12px */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   6rem;      /* 96px */
  --space-5xl:   8rem;      /* 128px */

  /* ---- Border Radius (adapted from Figma radius-mode-1) ----------------- */
  --radius-xs:   0.25rem;   /*  4px */
  --radius-sm:   0.5rem;    /*  8px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ---- Shadows (adapted from Figma shadows-mode-1) ---------------------- */
  --shadow-sm:    0 1px 2px rgba(1, 2, 37, 0.25);
  --shadow-md:    0 4px 8px rgba(1, 2, 37, 0.35);
  --shadow-lg:    0 8px 24px rgba(1, 2, 37, 0.45);
  --shadow-xl:    0 16px 48px rgba(1, 2, 37, 0.55);
  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.3);

  /* ---- Glassmorphism Materials ------------------------------------------ */
  --mat-glass-1: blur(8px);   /* Nav, toolbars — subtle */
  --mat-glass-2: blur(10px);  /* Cards, panels — standard */
  --mat-glass-3: blur(50px);  /* Widgets, modals — dense */

  --mat-glass-1-bg: rgba(10, 15, 26, 0.85);
  --mat-glass-2-bg: rgba(10, 15, 26, 0.95);
  --mat-glass-3-bg: rgba(10, 15, 26, 0.72);

  /* ---- Motion ----------------------------------------------------------- */
  --motion-instant:  50ms;
  --motion-fast:     100ms;
  --motion-base:     200ms;
  --motion-moderate: 350ms;
  --motion-slow:     500ms;
  --motion-glacial:  1000ms;

  --motion-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: all var(--motion-fast) ease;
  --transition-base: all var(--motion-base) ease;
  --transition-slow: all var(--motion-slow) var(--motion-ease-out);

  /* ---- Layout ----------------------------------------------------------- */
  --layout-container:      1000px;
  --layout-container-wide: 1200px;
  --layout-container-narrow: 700px;
  --layout-touch:          44px;
  --layout-nav-height:     50px;
}

/* ---------- Light Theme (next-themes uses .dark class) ------------------- */
html:not(.dark) {
  --color-bg:              #f5f3f0;
  --color-bg-alt:          #eae6e1;
  --color-surface-1:       rgba(0, 0, 0, 0.08);
  --color-surface-2:       rgba(0, 0, 0, 0.15);
  --color-surface-3:       rgba(0, 0, 0, 0.20);
  --color-surface-nav:     rgba(255, 255, 255, 0.95);

  --color-text:            #242526;
  --color-text-strong:     #000000;
  --color-text-secondary:  rgba(0, 0, 0, 0.7);
  --color-text-tertiary:   rgba(0, 0, 0, 0.5);
  --color-text-muted:      rgba(0, 0, 0, 0.4);
  --color-text-faint:      rgba(0, 0, 0, 0.3);

  --color-accent:           #0066cc;
  --color-accent-bright:    #0088ff;
  --color-accent-dim:       #004c99;
  --color-accent-bg:        rgba(0, 102, 204, 0.1);
  --color-accent-bg-subtle: rgba(0, 102, 204, 0.05);

  --color-border:          rgba(0, 0, 0, 0.1);
  --color-border-hover:    rgba(0, 0, 0, 0.2);
  --color-border-accent:   rgba(0, 102, 204, 0.3);
  --color-border-accent-strong: rgba(0, 102, 204, 0.5);

  --color-card:        oklch(1.0000 0 0);
  --color-destructive: oklch(0.6368 0.2078 25.3313);
  --color-secondary:   rgba(0, 0, 0, 0.06);

  --gradient-brand: linear-gradient(90deg, #0066cc, #8b5cf6, #ec4899);

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.20);
  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.1);

  --mat-glass-1-bg: rgba(235, 230, 225, 0.7);
  --mat-glass-2-bg: rgba(245, 240, 235, 0.85);
  --mat-glass-3-bg: rgba(255, 250, 245, 0.9);
}

/* ---------- Dark Theme (next-themes adds .dark class) --------------------- */
html.dark {
  --color-bg:              var(--palette-dark);
  --color-bg-alt:          var(--palette-alt);
  --color-surface-1:       rgba(255, 255, 255, 0.03);
  --color-surface-2:       rgba(255, 255, 255, 0.06);
  --color-surface-3:       rgba(255, 255, 255, 0.10);
  --color-surface-nav:     rgba(10, 15, 26, 0.95);

  --color-text:            #e0e0e0;
  --color-text-strong:     #ffffff;
  --color-text-secondary:  rgba(255, 255, 255, 0.7);
  --color-text-tertiary:   rgba(255, 255, 255, 0.5);
  --color-text-muted:      rgba(255, 255, 255, 0.4);
  --color-text-faint:      rgba(255, 255, 255, 0.3);

  --color-accent:           var(--palette-cyan-500);
  --color-accent-bright:    var(--palette-cyan-400);
  --color-accent-dim:       var(--palette-cyan-700);
  --color-accent-bg:        rgba(65, 217, 217, 0.15);
  --color-accent-bg-subtle: rgba(65, 217, 217, 0.08);

  --color-border:          rgba(255, 255, 255, 0.08);
  --color-border-hover:    rgba(255, 255, 255, 0.15);
  --color-border-accent:   rgba(65, 217, 217, 0.3);
  --color-border-accent-strong: rgba(65, 217, 217, 0.4);

  --color-card:        oklch(0.2077 0.0398 265.7549);
  --color-destructive: oklch(0.4437 0.1613 26.8994);
  --color-secondary:   var(--color-surface-2);

  --shadow-sm:    0 1px 2px rgba(1, 2, 37, 0.25);
  --shadow-md:    0 4px 8px rgba(1, 2, 37, 0.35);
  --shadow-lg:    0 8px 24px rgba(1, 2, 37, 0.45);
  --shadow-xl:    0 16px 48px rgba(1, 2, 37, 0.55);
  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.3);

  --mat-glass-1-bg: rgba(10, 15, 26, 0.85);
  --mat-glass-2-bg: rgba(10, 15, 26, 0.95);
  --mat-glass-3-bg: rgba(10, 15, 26, 0.72);
}