/* =========================================================================
   Atelier AI — Design Tokens
   Layer 1: Primitive palette   — raw hex values, theme-agnostic
   Layer 2: Semantic aliases    — meaningful names (bg-canvas, text-primary)
   Layer 3: Role tokens         — component-facing (accent-primary, ring)

   Theme swap only mutates Layer 2/3. Layer 1 never changes.
   ========================================================================= */

:root {
  /* ----------------------------------------------------------------
   *  Layer 1 · Primitives
   * ---------------------------------------------------------------- */

  /* Brand · Orange (warm CTA, e-commerce energy) */
  --brand-orange-50:  #FFF7ED;
  --brand-orange-100: #FFEDD5;
  --brand-orange-200: #FED7AA;
  --brand-orange-300: #FDBA74;
  --brand-orange-400: #FB923C;
  --brand-orange-500: #F97316;   /* primary anchor */
  --brand-orange-600: #EA580C;
  --brand-orange-700: #C2410C;
  --brand-orange-800: #9A3412;
  --brand-orange-900: #7C2D12;

  /* Brand · Violet (AI / intelligence accent) */
  --brand-violet-50:  #F5F3FF;
  --brand-violet-100: #EDE9FE;
  --brand-violet-200: #DDD6FE;
  --brand-violet-300: #C4B5FD;
  --brand-violet-400: #A78BFA;
  --brand-violet-500: #8B5CF6;   /* secondary anchor */
  --brand-violet-600: #7C3AED;
  --brand-violet-700: #6D28D9;
  --brand-violet-800: #5B21B6;
  --brand-violet-900: #4C1D95;

  /* Neutral · Zinc-tinted grayscale */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FAFAFA;
  --neutral-100:  #F4F4F5;
  --neutral-150:  #ECECEE;
  --neutral-200:  #E4E4E7;
  --neutral-300:  #D4D4D8;
  --neutral-400:  #A1A1AA;
  --neutral-500:  #71717A;
  --neutral-600:  #52525B;
  --neutral-700:  #3F3F46;
  --neutral-800:  #27272A;
  --neutral-850:  #1F1F23;
  --neutral-900:  #18181B;
  --neutral-950:  #09090B;
  --neutral-1000: #000000;

  /* Semantic · Success (green) */
  --success-50:  #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  /* Semantic · Warning (amber) */
  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  /* Semantic · Danger (red) */
  --danger-50:   #FEF2F2;
  --danger-100:  #FEE2E2;
  --danger-500:  #EF4444;
  --danger-600:  #DC2626;
  --danger-700:  #B91C1C;

  /* Semantic · Info (blue) */
  --info-50:  #EFF6FF;
  --info-100: #DBEAFE;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1D4ED8;

  /* ----------------------------------------------------------------
   *  Typography primitives
   * ---------------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo,
               Consolas, "Liberation Mono", monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;  /* legacy body */
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  30px;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ----------------------------------------------------------------
   *  Spacing (4pt grid)
   * ---------------------------------------------------------------- */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ----------------------------------------------------------------
   *  Radius
   * ---------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------------
   *  Shadow (light theme base)
   * ---------------------------------------------------------------- */
  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.04);
  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.18);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.04);

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

  --duration-instant: 80ms;
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    320ms;
  --duration-slower:  500ms;

  /* ----------------------------------------------------------------
   *  Layout constants
   * ---------------------------------------------------------------- */
  --footer-h: 48px;
  --header-h: 52px;

  /* ----------------------------------------------------------------
   *  Z-index
   * ---------------------------------------------------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-dropdown: 500;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-tooltip:  3000;

  /* ----------------------------------------------------------------
   *  Layer 2 · Semantic surface / text / border
   *  (light theme — default)
   * ---------------------------------------------------------------- */
  --bg-canvas:     var(--neutral-50);
  --bg-elevated:   var(--neutral-0);
  --bg-subtle:     var(--neutral-100);
  --bg-muted:      var(--neutral-200);
  --bg-inverse:    var(--neutral-900);
  --bg-overlay:    rgb(0 0 0 / 0.45);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-400);
  --text-disabled:  var(--neutral-300);
  --text-inverse:   var(--neutral-0);

  --border-subtle:  var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-400);

  /* Alpha overlays (on canvas) */
  --alpha-hover:   rgb(0 0 0 / 0.04);
  --alpha-active:  rgb(0 0 0 / 0.08);
  --alpha-selected: rgb(0 0 0 / 0.06);

  /* ----------------------------------------------------------------
   *  Layer 3 · Role tokens (component-facing)
   * ---------------------------------------------------------------- */

  /* Primary = orange (warm CTA) */
  --accent-primary:         var(--brand-orange-500);
  --accent-primary-hover:   var(--brand-orange-600);
  --accent-primary-active:  var(--brand-orange-700);
  --accent-primary-subtle:  var(--brand-orange-50);
  --accent-primary-fg:      var(--neutral-0);

  /* Secondary = violet (AI accent) */
  --accent-secondary:        var(--brand-violet-500);
  --accent-secondary-hover:  var(--brand-violet-600);
  --accent-secondary-active: var(--brand-violet-700);
  --accent-secondary-subtle: var(--brand-violet-50);
  --accent-secondary-fg:     var(--neutral-0);

  /* Signature gradient — used on logo, featured buttons, progress */
  --accent-gradient: linear-gradient(135deg,
                      var(--brand-orange-500) 0%,
                      var(--brand-violet-500) 100%);
  --accent-gradient-soft: linear-gradient(135deg,
                      var(--brand-orange-100) 0%,
                      var(--brand-violet-100) 100%);

  /* Semantic roles */
  --role-success:        var(--success-500);
  --role-success-bg:     var(--success-50);
  --role-success-fg:     var(--success-700);
  --role-warning:        var(--warning-500);
  --role-warning-bg:     var(--warning-50);
  --role-warning-fg:     var(--warning-700);
  --role-danger:         var(--danger-500);
  --role-danger-hover:   var(--danger-600);
  --role-danger-bg:      var(--danger-50);
  --role-danger-fg:      var(--danger-700);
  --role-info:           var(--info-500);
  --role-info-bg:        var(--info-50);
  --role-info-fg:        var(--info-700);

  /* Focus ring (accessible 3px halo) */
  --ring-default: 0 0 0 3px rgb(139 92 246 / 0.22); /* violet @ 22% */
  --ring-primary: 0 0 0 3px rgb(249 115 22 / 0.28); /* orange @ 28% */
  --ring-danger:  0 0 0 3px rgb(239 68 68 / 0.22);
  --ring-success: 0 0 0 3px rgb(16 185 129 / 0.22);

  /* Component defaults */
  --radius-control: var(--radius-md);
  --radius-card:    var(--radius-xl);
  --shadow-card:    var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-popover: var(--shadow-lg);
}

/* =========================================================================
   Dark theme — overrides Layer 2 and 3 only
   ========================================================================= */
[data-theme="dark"] {
  --bg-canvas:     var(--neutral-950);
  --bg-elevated:   var(--neutral-900);
  --bg-subtle:     var(--neutral-850);
  --bg-muted:      var(--neutral-800);
  --bg-inverse:    var(--neutral-50);
  --bg-overlay:    rgb(0 0 0 / 0.65);

  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-400);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-700);
  --text-inverse:   var(--neutral-900);

  --border-subtle:  var(--neutral-850);
  --border-default: var(--neutral-800);
  --border-strong:  var(--neutral-600);

  --alpha-hover:    rgb(255 255 255 / 0.05);
  --alpha-active:   rgb(255 255 255 / 0.10);
  --alpha-selected: rgb(255 255 255 / 0.07);

  /* Slightly brighter accents on dark surfaces for perceived parity */
  --accent-primary:        var(--brand-orange-400);
  --accent-primary-hover:  var(--brand-orange-500);
  --accent-primary-active: var(--brand-orange-600);
  --accent-primary-subtle: rgb(249 115 22 / 0.15);
  --accent-primary-fg:     var(--neutral-950);

  --accent-secondary:        var(--brand-violet-400);
  --accent-secondary-hover:  var(--brand-violet-500);
  --accent-secondary-active: var(--brand-violet-600);
  --accent-secondary-subtle: rgb(139 92 246 / 0.15);
  --accent-secondary-fg:     var(--neutral-950);

  --accent-gradient: linear-gradient(135deg,
                      var(--brand-orange-400) 0%,
                      var(--brand-violet-400) 100%);
  --accent-gradient-soft: linear-gradient(135deg,
                      rgb(249 115 22 / 0.12) 0%,
                      rgb(139 92 246 / 0.12) 100%);

  --role-success-bg: rgb(16 185 129 / 0.12);
  --role-success-fg: var(--success-500);
  --role-warning-bg: rgb(245 158 11 / 0.12);
  --role-warning-fg: var(--warning-500);
  --role-danger-bg:  rgb(239 68 68 / 0.12);
  --role-danger-fg:  var(--danger-500);
  --role-info-bg:    rgb(59 130 246 / 0.12);
  --role-info-fg:    var(--info-500);

  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.32);
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.40), 0 2px 4px -2px rgb(0 0 0 / 0.30);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.30);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.50), 0 8px 10px -6px rgb(0 0 0 / 0.30);
  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.60);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.30);

  --ring-default: 0 0 0 3px rgb(167 139 250 / 0.35);
  --ring-primary: 0 0 0 3px rgb(251 146 60 / 0.35);
  --ring-danger:  0 0 0 3px rgb(239 68 68 / 0.35);
  --ring-success: 0 0 0 3px rgb(16 185 129 / 0.35);
}

/* =========================================================================
   Respect users that prefer reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}