/* ============================================================
   dct design tokens — generated from dct.design Figma file
   Architecture: primitives → sys aliases → component usage
   ============================================================ */

/* ------------------------------------------------------------
   PRIMITIVES — Color scale (Radix-based)
   ------------------------------------------------------------ */
:root {

  /* Blue */
  --color-blue-50:       #fdfdfe;
  --color-blue-100:      #f7f9ff;
  --color-blue-200:      #edf2fe;
  --color-blue-300:      #dfeaff;
  --color-blue-400:      #d0dfff;
  --color-blue-500:      #bdd1ff;
  --color-blue-600:      #a6bff9;
  --color-blue-700:      #87a5ef;
  --color-blue-800:      #3d63dd;
  --color-blue-900:      #3657c3;
  --color-blue-950:      #395bc7;
  --color-blue-default:  #1d2e5c;
  --color-blue-contrast: #ffffff;
  --color-blue-alpha-1:  rgba(0, 0, 128, 0.01);
  --color-blue-alpha-2:  rgba(0, 117, 250, 0.09);
  --color-blue-alpha-3:  rgba(0, 127, 254, 0.22);
  --color-blue-alpha-4:  rgba(0, 124, 254, 0.33);
  --color-blue-alpha-5:  rgba(0, 135, 255, 0.41);
  --color-blue-alpha-6:  rgba(0, 144, 253, 0.49);
  --color-blue-alpha-7:  rgba(28, 154, 255, 0.58);
  --color-blue-alpha-8:  rgba(31, 156, 254, 0.71);
  --color-blue-alpha-9:  rgba(3, 145, 253, 0.49);
  --color-blue-alpha-10: rgba(0, 134, 255, 0.4);

  /* Gray */
  --color-gray-50:       #f9f9fa;
  --color-gray-100:      #f4f4f5;
  --color-gray-200:      #e4e4e7;
  --color-gray-300:      #d1d1d6;
  --color-gray-400:      #a09fa7;
  --color-gray-500:      #6d6d77;
  --color-gray-600:      #504f56;
  --color-gray-700:      #3a393f;
  --color-gray-800:      #252529;
  --color-gray-900:      #18181c;
  --color-gray-950:      #09090c;
  --color-gray-default:  #1e1f24;
  --color-gray-alpha-5:  rgba(0, 9, 50, 0.12);

  /* Red */
  --color-red-50:        #fff5f5;
  --color-red-100:       #ffe3e3;
  --color-red-200:       #ffc9c9;
  --color-red-300:       #ffa8a8;
  --color-red-400:       #ff8787;
  --color-red-500:       #ff6b6b;
  --color-red-600:       #fa5252;
  --color-red-700:       #f03e3e;
  --color-red-800:       #e03131;
  --color-red-900:       #c92a2a;
  --color-red-950:       #a61e1e;
  --color-red-contrast:  #ffffff;

  /* Green */
  --color-green-50:       #f0fdf4;
  --color-green-100:      #dcfce7;
  --color-green-200:      #bbf7d0;
  --color-green-300:      #86efac;
  --color-green-400:      #4ade80;
  --color-green-500:      #22c55e;
  --color-green-600:      #16a34a;
  --color-green-700:      #15803d;
  --color-green-800:      #166534;
  --color-green-900:      #14532d;
  --color-green-950:      #052e16;
  --color-green-contrast: #ffffff;

  /* Yellow */
  --color-yellow-50:       #fffbeb;
  --color-yellow-100:      #fef3c7;
  --color-yellow-200:      #fde68a;
  --color-yellow-300:      #fcd34d;
  --color-yellow-400:      #fbbf24;
  --color-yellow-500:      #f59e0b;
  --color-yellow-600:      #d97706;
  --color-yellow-700:      #b45309;
  --color-yellow-800:      #92400e;
  --color-yellow-900:      #78350f;
  --color-yellow-950:      #451a03;
  --color-yellow-contrast: #000000;

  /* ------------------------------------------------------------
     PRIMITIVES — Typography
     ------------------------------------------------------------ */

  /* Family */
  --font-family-sans: 'Inter', sans-serif;
  --font-family-mono: 'Inconsolata', monospace;

  /* Size scale */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;
  --font-size-5xl:  48px;
  --font-size-6xl:  60px;
  --font-size-7xl:  72px;
  --font-size-8xl:  96px;
  --font-size-9xl:  128px;

  /* Weight */
  --font-weight-thin:       100;
  --font-weight-extralight: 200;
  --font-weight-light:      300;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  /* Leading */
  --font-leading-none:    1;
  --font-leading-tight:   1.25;
  --font-leading-snug:    1.375;
  --font-leading-normal:  1.5;
  --font-leading-relaxed: 1.625;
  --font-leading-loose:   2;

  /* Tracking */
  --font-tracking-tighter: -0.8px;
  --font-tracking-tight:   -0.4px;
  --font-tracking-normal:   0px;
  --font-tracking-wide:     0.4px;
  --font-tracking-wider:    0.8px;
  --font-tracking-widest:   1.6px;

  /* ------------------------------------------------------------
     PRIMITIVES — Border radius
     ------------------------------------------------------------ */
  --radius-none:    0px;
  --radius-sm:      2px;
  --radius-default: 4px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-xl:      12px;
  --radius-2xl:     16px;
  --radius-3xl:     24px;
  --radius-full:    9999px;

  /* ------------------------------------------------------------
     PRIMITIVES — Spacing scale
     ------------------------------------------------------------ */
  --spacing-px:   1px;
  --spacing-0-5:  2px;
  --spacing-1:    4px;
  --spacing-1-5:  6px;
  --spacing-2:    8px;
  --spacing-2-5:  10px;
  --spacing-3:    12px;
  --spacing-3-5:  14px;
  --spacing-4:    16px;
  --spacing-5:    20px;
  --spacing-6:    24px;
  --spacing-7:    28px;
  --spacing-8:    32px;
  --spacing-9:    36px;
  --spacing-10:   40px;
  --spacing-11:   44px;
  --spacing-12:   48px;
  --spacing-14:   56px;
  --spacing-16:   64px;
  --spacing-20:   80px;
  --spacing-24:   96px;
  --spacing-28:   112px;
  --spacing-32:   128px;
  --spacing-36:   144px;
  --spacing-40:   160px;
  --spacing-44:   176px;
  --spacing-48:   192px;
  --spacing-52:   208px;
  --spacing-56:   224px;
  --spacing-60:   240px;
  --spacing-64:   256px;
  --spacing-72:   288px;
  --spacing-80:   320px;
  --spacing-96:   384px;

  /* ------------------------------------------------------------
     PRIMITIVES — Icon sizes
     ------------------------------------------------------------ */
  --icon-xs:   12px;
  --icon-sm:   15px;
  --icon-md:   16px;
  --icon-lg:   20px;
  --icon-xl:   24px;
  --icon-2xl:  32px;
}

/* ------------------------------------------------------------
   SYS TOKENS — LIGHT MODE (default)
   All values reference primitives via var()
   ------------------------------------------------------------ */
:root,
[data-theme="light"] {

  /* Background */
  --color-bg-default:       var(--color-gray-50);
  --color-bg-subtle:        var(--color-gray-100);
  --color-bg-muted:         var(--color-gray-200);

  /* Foreground */
  --color-fg-default:       var(--color-gray-950);
  --color-fg-muted:         var(--color-gray-800);
  --color-fg-subtle:        var(--color-gray-600);
  --color-fg-disabled:      var(--color-gray-400);
  --color-fg-on-accent:     var(--color-blue-contrast);

  /* Border */
  --color-border-default:   var(--color-gray-300);
  --color-border-strong:    var(--color-gray-400);
  --color-border-muted:     var(--color-gray-200);
  --color-border-accent:    var(--color-blue-700);

  /* Accent */
  --color-accent-default:   var(--color-blue-900);
  --color-accent-hover:     var(--color-blue-950);
  --color-accent-muted:     var(--color-blue-100);
  --color-accent-subtle:    var(--color-blue-50);
  --color-accent-fg:        var(--color-blue-900);

  /* Surface */
  --color-surface-default:  var(--color-gray-50);
  --color-surface-raised:   var(--color-gray-100);
  --color-surface-overlay:  var(--color-gray-200);

  /* State */
  --color-focus:            var(--color-blue-700);
  --color-disabled-bg:      var(--color-gray-400);
  --color-disabled-text:    var(--color-gray-900);

  /* Danger */
  --color-danger-default:   var(--color-red-800);
  --color-danger-hover:     var(--color-red-900);
  --color-danger-muted:     var(--color-red-100);
  --color-danger-fg:        var(--color-red-700);
  --color-danger-on-danger: var(--color-red-contrast);

  /* Status — Success */
  --color-success-bg:        var(--color-green-100);
  --color-success-bg-subtle: var(--color-green-50);
  --color-success-border:    var(--color-green-300);
  --color-success-text:      var(--color-gray-default);
  --color-success-icon:      var(--color-green-700);
  --color-success-solid:     var(--color-green-600);
  --color-success-on-solid:  var(--color-green-contrast);

  /* Status — Warning */
  --color-warning-bg:        var(--color-yellow-100);
  --color-warning-bg-subtle: var(--color-yellow-50);
  --color-warning-border:    var(--color-yellow-300);
  --color-warning-text:      var(--color-gray-default);
  --color-warning-icon:      var(--color-yellow-700);
  --color-warning-solid:     var(--color-yellow-500);
  --color-warning-on-solid:  var(--color-yellow-contrast);

  /* Status — Error */
  --color-error-bg:          var(--color-red-100);
  --color-error-bg-subtle:   var(--color-red-50);
  --color-error-border:      var(--color-red-300);
  --color-error-text:        var(--color-gray-default);
  --color-error-icon:        var(--color-red-700);
  --color-error-solid:       var(--color-red-600);
  --color-error-on-solid:    var(--color-red-contrast);

  /* Status — Info */
  --color-info-bg:           var(--color-blue-100);
  --color-info-bg-subtle:    var(--color-blue-50);
  --color-info-border:       var(--color-blue-300);
  --color-info-text:         var(--color-gray-default);
  --color-info-icon:         var(--color-blue-700);
  --color-info-solid:        var(--color-blue-600);
  --color-info-on-solid:     var(--color-blue-contrast);

  /* Icon */
  --color-icon-default:      var(--color-gray-default);
  --color-icon-muted:        var(--color-gray-500);
  --color-icon-subtle:       var(--color-gray-400);
  --color-icon-disabled:     var(--color-gray-300);
  --color-icon-on-accent:    var(--color-blue-contrast);
  --color-icon-accent:       var(--color-blue-900);
  --color-icon-success:      var(--color-green-600);
  --color-icon-warning:      var(--color-yellow-600);
  --color-icon-error:        var(--color-red-600);
  --color-icon-info:         var(--color-blue-600);

  /* Sys — Font aliases */
  --font-body:              var(--font-family-sans);
  --font-heading:           var(--font-family-sans);
  --font-mono:              var(--font-family-mono);
  --font-size-caption:      var(--font-size-xs);
  --font-size-label:        var(--font-size-sm);
  --font-size-body:         var(--font-size-base);
  --font-size-body-lg:      var(--font-size-lg);
  --font-size-subtitle:     var(--font-size-xl);
  --font-size-title:        var(--font-size-2xl);
  --font-size-h3:           var(--font-size-3xl);
  --font-size-h2:           var(--font-size-4xl);
  --font-size-h1:           var(--font-size-5xl);
  --font-size-display:      var(--font-size-6xl);
  --font-weight-body:       var(--font-weight-normal);
  --font-weight-label:      var(--font-weight-medium);
  --font-weight-emphasis:   var(--font-weight-semibold);
  --font-weight-heading:    var(--font-weight-bold);
  --font-weight-display:    var(--font-weight-extrabold);
  --font-leading-tight-sys: var(--font-leading-tight);
  --font-leading-snug-sys:  var(--font-leading-snug);
  --font-leading-body:      var(--font-leading-normal);
  --font-leading-relaxed-sys: var(--font-leading-relaxed);
  --font-tracking-heading:  var(--font-tracking-tight);
  --font-tracking-body:     var(--font-tracking-normal);
  --font-tracking-label:    var(--font-tracking-wide);
  --font-tracking-caption:  var(--font-tracking-wider);
}

/* ------------------------------------------------------------
   SYS TOKENS — DARK MODE
   ------------------------------------------------------------ */
[data-theme="dark"] {

  /* Background */
  --color-bg-default:       var(--color-gray-900);
  --color-bg-subtle:        var(--color-gray-900);
  --color-bg-muted:         var(--color-gray-800);

  /* Foreground */
  --color-fg-default:       var(--color-gray-200);
  --color-fg-muted:         var(--color-gray-400);
  --color-fg-subtle:        var(--color-gray-600);
  --color-fg-disabled:      var(--color-gray-700);
  --color-fg-on-accent:     var(--color-blue-contrast);

  /* Border */
  --color-border-default:   var(--color-gray-700);
  --color-border-strong:    var(--color-gray-500);
  --color-border-muted:     var(--color-gray-800);
  --color-border-accent:    var(--color-blue-400);

  /* Accent */
  --color-accent-default:   var(--color-blue-800);
  --color-accent-hover:     var(--color-blue-alpha-9);
  --color-accent-muted:     var(--color-blue-900);
  --color-accent-subtle:    var(--color-blue-950);
  --color-accent-fg:        var(--color-blue-400);

  /* Surface */
  --color-surface-default:  var(--color-gray-950);
  --color-surface-raised:   var(--color-gray-800);
  --color-surface-overlay:  var(--color-gray-700);

  /* State */
  --color-focus:            var(--color-blue-400);
  --color-disabled-bg:      var(--color-gray-alpha-5);
  --color-disabled-text:    var(--color-gray-700);

  /* Danger */
  --color-danger-default:   var(--color-red-800);
  --color-danger-hover:     var(--color-red-900);
  --color-danger-muted:     var(--color-red-950);
  --color-danger-fg:        var(--color-red-200);
  --color-danger-on-danger: var(--color-red-contrast);

  /* Status — Success */
  --color-success-bg:        var(--color-green-950);
  --color-success-bg-subtle: var(--color-green-900);
  --color-success-border:    var(--color-green-700);
  --color-success-text:      var(--color-gray-50);
  --color-success-icon:      var(--color-green-400);
  --color-success-solid:     var(--color-green-500);
  --color-success-on-solid:  var(--color-green-contrast);

  /* Status — Warning */
  --color-warning-bg:        var(--color-yellow-950);
  --color-warning-bg-subtle: var(--color-yellow-900);
  --color-warning-border:    var(--color-yellow-700);
  --color-warning-text:      var(--color-gray-50);
  --color-warning-icon:      var(--color-yellow-400);
  --color-warning-solid:     var(--color-yellow-400);
  --color-warning-on-solid:  var(--color-yellow-contrast);

  /* Status — Error */
  --color-error-bg:          var(--color-red-950);
  --color-error-bg-subtle:   var(--color-red-900);
  --color-error-border:      var(--color-red-700);
  --color-error-text:        var(--color-gray-50);
  --color-error-icon:        var(--color-red-400);
  --color-error-solid:       var(--color-red-500);
  --color-error-on-solid:    var(--color-red-contrast);

  /* Status — Info */
  --color-info-bg:           var(--color-blue-950);
  --color-info-bg-subtle:    var(--color-blue-900);
  --color-info-border:       var(--color-blue-700);
  --color-info-text:         var(--color-gray-50);
  --color-info-icon:         var(--color-blue-400);
  --color-info-solid:        var(--color-blue-500);
  --color-info-on-solid:     var(--color-blue-contrast);

  /* Icon */
  --color-icon-default:      var(--color-gray-50);
  --color-icon-muted:        var(--color-gray-600);
  --color-icon-subtle:       var(--color-gray-700);
  --color-icon-disabled:     var(--color-gray-700);
  --color-icon-on-accent:    var(--color-blue-contrast);
  --color-icon-accent:       var(--color-blue-400);
  --color-icon-success:      var(--color-green-400);
  --color-icon-warning:      var(--color-yellow-400);
  --color-icon-error:        var(--color-red-400);
  --color-icon-info:         var(--color-blue-400);
}