/* Asterwise Design System v1.0 — Pitch Black & Ice
   Source of truth. Never hardcode values elsewhere.
   Generated: April 2026 */

:root {

  /* ─── Backgrounds ─────────────────────────────── */
  --bg-base:      #080808;   /* page background */
  --bg-elevated:  #0e0e0e;   /* cards, panels, nav surface */
  --bg-subtle:    #161616;   /* hover states, code blocks, inputs */
  --bg-overlay:   #1e1e1e;   /* modals, dropdowns, tooltips */

  /* ─── Borders ─────────────────────────────────── */
  --border-subtle:  #282828;   /* default borders, dividers */
  --border-strong:  #383838;   /* hover borders */
  --border-focus:   rgba(192, 192, 248, 0.25);  /* focus ring */

  /* ─── Text ────────────────────────────────────── */
  --text-primary:    #f8f8f8;
  --text-secondary:  #a0a0a0;
  --text-muted:      #585858;

  /* ─── Accent — Ice ────────────────────────────── */
  --accent:         #c0c0f8;
  --accent-subtle:  rgba(192, 192, 248, 0.08);
  --accent-border:  rgba(192, 192, 248, 0.20);

  /* ─── Semantic ────────────────────────────────── */
  --color-success:  #34d399;
  --color-warning:  #f59e0b;
  --color-error:    #f56356;
  --color-success-subtle: rgba(52, 211, 153, 0.08);
  --color-warning-subtle: rgba(245, 158, 11, 0.08);
  --color-error-subtle:   rgba(245, 99, 86, 0.08);
  --color-success-border: rgba(52, 211, 153, 0.20);
  --color-warning-border: rgba(245, 158, 11, 0.20);
  --color-error-border:   rgba(245, 99, 86, 0.20);

  /* ─── Code syntax ─────────────────────────────── */
  --code-bg:        #0e0e0e;
  --code-keyword:   #c0c0f8;   /* ice — keywords */
  --code-string:    #f59e0b;   /* amber — strings */
  --code-number:    #c0c0f8;   /* ice — numbers */
  --code-property:  #a0a0a0;   /* secondary — properties */
  --code-comment:   #585858;   /* muted — comments */
  --code-function:  #34d399;   /* success — function calls */
  --code-text:      #f8f8f8;   /* primary — default text */

  /* ─── Typography ──────────────────────────────── */
  --font-sans:  'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.75rem;     /* 12px */
  --text-base: 0.9375rem;   /* 15px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  2rem;        /* 32px */
  --text-4xl:  2.5rem;      /* 40px */
  --text-5xl:  3.5rem;      /* 56px */

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.10em;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.65;
  --leading-relaxed: 1.75;

  /* Font weights */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* ─── Spacing (4px base grid) ─────────────────── */
  --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 */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */

  /* Named semantic spacing */
  --space-xs:  var(--space-2);    /* 8px  — icon gaps, tight inline */
  --space-sm:  var(--space-4);    /* 16px — card padding, stack items */
  --space-md:  var(--space-6);    /* 24px — between components */
  --space-lg:  var(--space-10);   /* 40px — section gaps */
  --space-xl:  var(--space-20);   /* 80px — hero vertical rhythm */
  --space-2xl: var(--space-24);   /* 96px — major section separation */
  --space-3xl: var(--space-32);   /* 128px — page-level breathing room */

  /* ─── Border radius ───────────────────────────── */
  --radius-sm:   4px;      /* badges, tags */
  --radius-md:   6px;      /* buttons, inputs */
  --radius-lg:   8px;      /* code blocks */
  --radius-xl:   10px;     /* cards */
  --radius-2xl:  12px;     /* modals, large panels */
  --radius-full: 9999px;   /* pills */

  /* ─── Borders (always 0.5px — never 1px) ─────── */
  --border-width: 0.5px;

  /* ─── Transitions ─────────────────────────────── */
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  /* ─── Z-index scale ───────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;

  /* ─── Layout ──────────────────────────────────── */
  --container-max: 1120px;
  --container-pad: var(--space-6);

  /* ─── Pricing (locked April 2026) ────────────── */
  --price-builder-inr:  "₹2,499";
  --price-launch-inr:   "₹6,999";
  --price-scale-inr:    "₹16,999";
  --price-builder-usd:  "$29";
  --price-launch-usd:   "$84";
  --price-scale-usd:    "$199";

  /* ─── Legacy aliases (DO NOT USE in new code) ─── */
  /* These exist only so existing JS/HTML refs don't
     break during incremental migration. Remove after
     all pages are rewritten. */
  --bg:            var(--bg-base);
  --surface:       var(--bg-elevated);
  --surface-2:     var(--bg-subtle);
  --border:        var(--border-subtle);
  --border-bright: var(--border-strong);
  --primary:       var(--accent);
  --primary-hover: #a8a8f0;
  --primary-glow:  var(--accent-subtle);
  --text:          var(--text-primary);
  --text-dim:      var(--text-muted);
  --success:       var(--color-success);
  --error:         var(--color-error);
}