/* tokens.css — Wranngle design system (web canonical).
 * Generated from DESIGN.md (mirrored from ~/.dotfiles/DESIGN.md).
 * Do not edit by hand; update DESIGN.md and re-extract. */

:root {
  /* ── Color: Sunset (action / CTA / primary brand accent) ── */
  --sunset-50:  #fff3e7;
  --sunset-100: #ffe0bf;
  --sunset-200: #ffc179;
  --sunset-300: #ff9e33;
  --sunset-400: #ff7f00;
  --sunset-500: #ff5f00; /* primary brand orange */
  --sunset-600: #ef4b00; /* CTA hover */
  --sunset-700: #c73a00;
  --sunset-800: #9f3000;
  --sunset-900: #7d2700;
  --sunset-950: #431300;

  /* ── Color: Violet (critical / security / premium accent) ── */
  --violet-50:  #fdf1f5;
  --violet-100: #f9dce5;
  --violet-200: #f2b6c6;
  --violet-300: #ea8aa6;
  --violet-400: #dd6186;
  --violet-500: #cf3c69; /* secondary brand magenta */
  --violet-600: #b92a56;
  --violet-700: #972144;
  --violet-800: #741a36;
  --violet-900: #561329;
  --violet-950: #2d0914;

  /* ── Color: Sand (neutral / background) ── */
  --sand-50:  #fcfaf5; /* light page background */
  --sand-100: #f6f1e7;
  --sand-200: #ebdfc8;
  --sand-300: #dac39f;
  --sand-400: #c2a677;
  --sand-500: #ab8c5b;
  --sand-600: #957850;
  --sand-700: #7a6343;
  --sand-800: #625137;
  --sand-900: #4f412d;
  --sand-950: #292218;

  /* ── Color: Night (dark / text) ── */
  --night-50:  #f2f0f3;
  --night-100: #e4e1e7;
  --night-200: #cbc7d3;
  --night-300: #aaa4b8;
  --night-400: #847d9a;
  --night-500: #6a6380;
  --night-600: #57516a;
  --night-700: #464055;
  --night-800: #393444;
  --night-900: #201e28;
  --night-950: #12111a; /* primary text on light background */

  /* ── Semantic mappings (web/marketing) ── */
  --color-action:        var(--sunset-500);
  --color-action-hover:  var(--sunset-600);
  --color-action-glow:   rgba(255, 95, 0, 0.25);
  --color-critical:      var(--violet-500);
  --color-warning:       var(--sunset-300);
  --color-healthy:       #5d8c61; /* cactus green */
  --color-info:          #3b82f6;

  /* ── Surface / text / borders ── */
  --surface-page:     var(--sand-50);
  --surface-card:     #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted:    var(--sand-100);
  --surface-glass:    rgba(255, 255, 255, 0.7);
  --text-primary:     var(--night-950);
  --text-secondary:   var(--night-500);
  --text-muted:       var(--night-400);
  --text-inverse:     var(--sand-50);
  --border-subtle:    var(--sand-200);
  --border-default:   var(--sand-300);
  --border-strong:    var(--sand-400);

  /* ── Status colors (in-app presence) ── */
  --status-online:  #22c55e;
  --status-away:    #f59e0b;
  --status-busy:    #ef4444;
  --status-offline: #9ca3af;

  /* ── Typography: font families ── */
  --font-display: 'Bricolage Grotesque', 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ── Typography: type scale (web) ── */
  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.75rem;   /* 12px */
  --text-base: 0.875rem;  /* 14px */
  --text-lg:   1rem;      /* 16px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */

  /* ── Spacing (8px-based) ── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ── Border radius (canonical web scale) ── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  9999px;
  --radius-lasso: 0 var(--radius-lg) var(--radius-lg) 0; /* signature asymmetric */

  /* ── Shadows / elevation (Night-950-tinted) ── */
  --shadow-xs:    0 1px 2px rgba(18, 17, 26, 0.04);
  --shadow-sm:    0 2px 4px rgba(18, 17, 26, 0.04), 0 1px 2px rgba(18, 17, 26, 0.02);
  --shadow-md:    0 4px 12px rgba(18, 17, 26, 0.06), 0 2px 4px rgba(18, 17, 26, 0.04);
  --shadow-lg:    0 8px 24px rgba(18, 17, 26, 0.08), 0 4px 8px rgba(18, 17, 26, 0.04);
  --shadow-xl:    0 16px 48px rgba(18, 17, 26, 0.12), 0 8px 16px rgba(18, 17, 26, 0.06);
  --shadow-glow:  0 0 24px var(--color-action-glow);
  --shadow-inner: inset 0 2px 4px rgba(18, 17, 26, 0.06);

  /* ── Motion ── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}