/* ak-design — bundle: system/colors_and_type.css + system/tokens-dev.css + themes/dev.css. Generated by build.mjs; do not edit. */
/* ============================================================
   Arslan Kazmi — Design Tokens
   Cerulean × Purple × Sea-Green · Wes Anderson meets Punk
   ============================================================ */

/* -- FONT FACES -------------------------------------------- */

@font-face {
  font-family: "Unreal T";
  src: url("../system/fonts/UnrealT.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Deca";
  src: url("../system/fonts/LexendDeca-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../system/fonts/JetBrainsMono[wght].ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========================================================
     COLOR — PRIMITIVES
     ======================================================== */

  /* Cerulean — primary. Teal-leaning, drifts toward sea-green as it darkens. */
  --cerulean-50:  #e9f6f4;
  --cerulean-100: #ccece8;
  --cerulean-200: #9bdcd4;
  --cerulean-300: #63c6bb;
  --cerulean-400: #2fa99c;
  --cerulean-500: #178e8b;   /* canonical cerulean (sea-green teal) */
  --cerulean-600: #127472;
  --cerulean-700: #0e5d5b;
  --cerulean-800: #0a4645;
  --cerulean-900: #062f2e;

  /* Purple — co-primary. Anchored on the SNES (NTSC / US) console palette:
     light-purple eject button + dark-purple power button. */
  --purple-50:  #f1eef7;
  --purple-100: #e2dcee;
  --purple-200: #c6bbdf;
  --purple-300: #a698c3;   /* SNES purple · light (eject / reset button) */
  --purple-400: #8273b0;
  --purple-500: #5d4b85;   /* SNES purple · dark (power button) — canonical */
  --purple-600: #4a3b6e;
  --purple-700: #382c57;
  --purple-800: #261d3d;
  --purple-900: #161028;

  /* SNES console-body grays — warm, slightly beige */
  --snes-gray-light: #c8c3bc;   /* top shell */
  --snes-gray-dark:  #7e7872;   /* bottom shell / cartridge tray */

  /* Sea green — vibrant accent */
  --seagreen-50:  #e6f6f1;
  --seagreen-100: #c5ecdf;
  --seagreen-200: #8edcbf;
  --seagreen-300: #58c89f;
  --seagreen-400: #2faf83;
  --seagreen-500: #199268;   /* canonical sea green */
  --seagreen-600: #137553;
  --seagreen-700: #0f5c41;
  --seagreen-800: #0a4330;
  --seagreen-900: #062a1e;

  /* Lilac — soft accent */
  --lilac-50:  #f7f1fb;
  --lilac-100: #ecdef4;
  --lilac-200: #d8bfe6;
  --lilac-300: #c8b6e2;   /* canonical lilac */
  --lilac-400: #b193cf;
  --lilac-500: #9a78b8;

  /* Lavender — paler purple */
  --lavender-50:  #f4f1fa;
  --lavender-100: #e6dff3;
  --lavender-200: #cdc1e6;
  --lavender-300: #b4a5d9;   /* canonical lavender */
  --lavender-400: #978bc4;
  --lavender-500: #7c6fb0;

  /* Wes Anderson mutes — supporting palette */
  --rose-dust:    #d4a09a;   /* dusty rose / Tenenbaums pink */
  --mustard:      #d9a441;   /* aged mustard */
  --sage:         #a7b89c;   /* sun-bleached sage */
  --cream:        #f4ead5;   /* paperback cream */
  --terracotta:   #b86c52;   /* faded brick */
  --pale-mint:    #c5dfd2;   /* mint sorbet */

  /* Punk — electric, amped-up versions of the core palette (NOT new hues).
     Cerulean / lilac / SNES-purple, pushed to high chroma. Use sparingly. */
  --punk-cerulean: #12cabf;   /* electric teal-cerulean */
  --punk-lilac:    #b06bff;   /* electric lilac */
  --punk-purple:   #7d4fe0;   /* electric SNES purple */

  /* Ink & paper */
  --ink-900: #15131c;        /* near-black with violet bias */
  --ink-800: #211d2c;
  --ink-700: #34304a;
  --ink-600: #4b4666;
  --ink-500: #6a647f;
  --ink-400: #8c869c;
  --ink-300: #b1abbf;
  --ink-200: #d4d0de;
  --ink-100: #ebe7f1;
  --paper:   #edece4;        /* newsprint — cool off-white, Sunday-funnies stock */
  --paper-2: #e2e0d6;        /* aged newsprint */
  --white:   #ffffff;

  /* Newsprint halftone (ben-day) dot — the comics-page motif */
  --newsprint-dot: rgba(33, 29, 44, 0.06);

  /* ========================================================
     COLOR — SEMANTIC
     ======================================================== */

  --bg:           var(--paper);
  --bg-elevated: var(--white);
  --bg-sunken:   var(--paper-2);
  --bg-inverse:  var(--ink-900);

  --fg1: var(--ink-900);     /* primary text */
  --fg2: var(--ink-600);     /* secondary text */
  --fg3: var(--ink-400);     /* tertiary / placeholder */
  --fg-inverse: var(--paper);
  --fg-on-accent: var(--paper);

  --accent:        var(--cerulean-500);
  --accent-hover:  var(--cerulean-600);
  --accent-press:  var(--cerulean-700);
  --accent-soft:   var(--cerulean-100);

  --accent-2:        var(--purple-500);
  --accent-2-hover:  var(--purple-600);
  --accent-2-soft:   var(--purple-100);

  --accent-3:        var(--seagreen-500);   /* sea green */
  --accent-3-soft:   var(--seagreen-100);

  --highlight:     var(--punk-cerulean);    /* hand-marker electric teal */
  --hot:           var(--punk-lilac);       /* pull-quote / heart pin */

  --border:        rgba(33, 29, 44, 0.12);
  --border-strong: rgba(33, 29, 44, 0.28);
  --border-accent: var(--cerulean-500);

  --success: var(--seagreen-500);
  --warning: var(--mustard);
  --danger:  #d6513d;   /* functional alert red — not a “punk” spot color */
  --info:    var(--cerulean-500);

  /* ========================================================
     TYPE — FAMILIES & SCALE
     ======================================================== */

  /* Lexend Deca is the workhorse — display + body + UI. */
  --font-display: "Lexend Deca", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Lexend Deca", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Unreal T is reserved for accent moments — easter eggs, stamps,
     the occasional pull-quote, a single oversized initial. Never for body,
     UI labels, nav, or default headings. */
  --font-accent:  "Unreal T", "Fraunces", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Modular scale ~1.250 */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  --lh-tight:  1.05;   /* @kind other */
  --lh-snug:   1.2;    /* @kind other */
  --lh-normal: 1.45;   /* @kind other */
  --lh-loose:  1.7;    /* @kind other */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  /* ========================================================
     SPACING / RADII / SHADOW / MOTION
     ======================================================== */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Stamped, paper shadows — subtle, never glassy */
  --shadow-xs: 0 1px 0 rgba(33, 29, 44, 0.06);
  --shadow-sm: 0 2px 6px -2px rgba(33, 29, 44, 0.12);
  --shadow-md: 0 8px 20px -8px rgba(33, 29, 44, 0.20);
  --shadow-lg: 0 24px 40px -20px rgba(33, 29, 44, 0.32);
  /* Punk: hard offset shadow, no blur */
  --shadow-stamp:    4px 4px 0 var(--ink-900);
  --shadow-stamp-lg: 8px 8px 0 var(--ink-900);
  --shadow-stamp-accent: 4px 4px 0 var(--cerulean-500);

  --ring-focus: 0 0 0 3px var(--lavender-300), 0 0 0 5px var(--cerulean-500);

  /* Eases — analog feel */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);     /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-med:  220ms;   /* @kind other */
  --dur-slow: 420ms;   /* @kind other */

  /* ========================================================
     LAYOUT
     ======================================================== */

  --max-prose: 68ch;
  --max-page:  1180px;
  --gutter:    var(--space-5);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; line-height: var(--lh-normal); }

::selection { background: var(--punk-cerulean); color: var(--ink-900); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg1);
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--fs-48), 6vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: clamp(var(--fs-36), 4vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h4 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
h5 {
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}

p {
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  max-width: var(--max-prose);
  text-wrap: pretty;
  margin: 0;
}

small, .caption {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg2);
  line-height: var(--lh-snug);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-2);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-2); text-decoration-thickness: 2px; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}
pre {
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--ink-900);
  color: var(--paper);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* Highlight marker — punk electric-teal stripe behind text */
.marker {
  background: linear-gradient(180deg, transparent 55%, var(--punk-cerulean) 55%);
  padding: 0 0.1em;
}

/* Newsprint halftone background — the Sunday-funnies / Calvin-and-Hobbes motif.
   Apply to a full-bleed light surface; content sits on top. */
.newsprint {
  background-color: var(--paper);
  background-image: radial-gradient(var(--newsprint-dot) 1px, transparent 1.6px);
  background-size: 6px 6px;
  background-position: 0 0;
}

/* ============================================================
   Arslan Kazmi — Developer theme tokens
   Dark-default surfaces, syntax themes, data-viz palette, and
   dev-component variables. Loaded after colors_and_type.css.
   ============================================================ */

/* ------------------------------------------------------------
   DARK THEME
   Apply with <html data-theme="dark"> (the dev hub does this by
   default). The personal/paper side leaves it off.
   ------------------------------------------------------------ */
:root[data-theme="dark"] {
  --bg:          #15131d;   /* near-black, violet bias (ink-900 family) */
  --bg-elevated: #1e1b2a;   /* cards / panels */
  --bg-sunken:   #100e17;   /* wells, code blocks */
  --bg-inverse:  var(--paper);

  --fg1: #ece9f5;           /* primary text */
  --fg2: #a8a2bd;           /* secondary */
  --fg3: #6f6986;           /* tertiary / placeholder */
  --fg-inverse: var(--ink-900);
  --fg-on-accent: #0a1018;

  /* accents brighten a step on dark for contrast */
  --accent:        var(--cerulean-300);
  --accent-hover:  var(--cerulean-200);
  --accent-press:  var(--cerulean-400);
  --accent-soft:   #18303f;

  --accent-2:        var(--lavender-300);
  --accent-2-hover:  var(--lavender-200);
  --accent-2-soft:   #2a2440;

  --accent-3:        var(--seagreen-300);
  --accent-3-soft:   #103a2c;

  --border:        rgba(236, 233, 245, 0.12);
  --border-strong: rgba(236, 233, 245, 0.26);
  --border-accent: var(--cerulean-400);

  --success: var(--seagreen-300);
  --warning: var(--mustard);
  --danger:  #e8705c;   /* functional alert red (dark theme) */
  --info:    var(--cerulean-300);

  /* shadows go deeper + lose the paper warmth */
  --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 28px 48px -22px rgba(0, 0, 0, 0.7);
  /* stamp shadow uses pure black on dark */
  --shadow-stamp:    4px 4px 0 #000000;
  --shadow-stamp-lg: 8px 8px 0 #000000;
  --shadow-stamp-accent: 4px 4px 0 var(--cerulean-400);

  --ring-focus: 0 0 0 3px rgba(180, 165, 217, 0.45), 0 0 0 5px var(--cerulean-300);
}

/* ------------------------------------------------------------
   DEV COMPONENT TOKENS  (theme-agnostic — read --bg etc.)
   ------------------------------------------------------------ */
:root {
  --code-radius: var(--radius-md);
  --code-pad:    var(--space-4);
  --code-fs:     0.92rem;
  --code-lh:     1.6;     /* @kind other */

  /* kbd */
  --kbd-bg:     var(--bg-elevated);
  --kbd-border: var(--border-strong);
  --kbd-shadow: 0 2px 0 var(--border-strong);

  /* language dots (repo cards) */
  --lang-js:     #d9a441;   /* mustard */
  --lang-ts:     #1f7fb4;   /* cerulean */
  --lang-py:     #199268;   /* sea green */
  --lang-rust:   #b86c52;   /* terracotta */
  --lang-go:     #6fb8db;   /* light cerulean */
  --lang-css:    #6b558f;   /* purple */
  --lang-shell:  #b8c93c;   /* acid */
  --lang-other:  #a7b89c;   /* sage */
}

/* ------------------------------------------------------------
   SYNTAX HIGHLIGHTING THEMES
   Default = brand. Switch with data-syntax="retro" | "classic"
   on the <pre> (or any ancestor).
   ------------------------------------------------------------ */
:root,
[data-syntax="brand"] {
  --syn-bg:      var(--bg-sunken);
  --syn-fg:      var(--fg1);
  --syn-comment: var(--ink-400);
  --syn-keyword: #6fb8db;   /* cerulean-300 */
  --syn-string:  #58c89f;   /* sea-green-300 */
  --syn-func:    #b4a5d9;   /* lavender-300 */
  --syn-number:  #d9a441;   /* mustard */
  --syn-type:    #a6d4ea;   /* cerulean-200 */
  --syn-var:     var(--fg1);
  --syn-punc:    var(--fg2);
  --syn-tag:     #d63d7a;   /* magenta */
}
[data-syntax="retro"] {
  --syn-bg:      #120f1a;
  --syn-fg:      #f3eefd;
  --syn-comment: #6f6986;
  --syn-keyword: #d63d7a;   /* magenta */
  --syn-string:  #b8c93c;   /* acid */
  --syn-func:    #3a98c8;   /* cerulean-400 */
  --syn-number:  #e07a4a;   /* coral */
  --syn-type:    #c8b6e2;   /* lilac */
  --syn-var:     #f3eefd;
  --syn-punc:    #9a93b3;
  --syn-tag:     #d63d7a;
}
[data-syntax="classic"] {
  --syn-bg:      #1b1d27;
  --syn-fg:      #d6d9e6;
  --syn-comment: #5f6b86;
  --syn-keyword: #6f9fd0;
  --syn-string:  #9ec48a;
  --syn-func:    #82c4d6;
  --syn-number:  #d29070;
  --syn-type:    #b48ead;
  --syn-var:     #d6d9e6;
  --syn-punc:    #8b93ad;
  --syn-tag:     #6f9fd0;
}

/* ------------------------------------------------------------
   DATA-VIZ PALETTE
   Categorical (qualitative) + a couple of sequential ramps.
   Drawn from the brand so charts feel native.
   ------------------------------------------------------------ */
:root {
  --viz-1: #1f7fb4;   /* cerulean   */
  --viz-2: #199268;   /* sea green  */
  --viz-3: #8273b0;   /* purple-400 */
  --viz-4: #d9a441;   /* mustard    */
  --viz-5: #d4a09a;   /* rose dust  */
  --viz-6: #b193cf;   /* lilac-400  */
  --viz-7: #b86c52;   /* terracotta */
  --viz-8: #a7b89c;   /* sage       */

  /* sequential — cerulean (low → high) */
  --viz-seq-1: #d2eaf5;
  --viz-seq-2: #a6d4ea;
  --viz-seq-3: #6fb8db;
  --viz-seq-4: #3a98c8;
  --viz-seq-5: #1f7fb4;
  --viz-seq-6: #145378;

  /* diverging — terracotta ↔ cerulean (mid = cream) */
  --viz-div-lo:  #b86c52;
  --viz-div-mid: #f1ebde;
  --viz-div-hi:  #1f7fb4;

  --viz-grid:  var(--border);
  --viz-axis:  var(--fg3);
}

/* ------------------------------------------------------------
   READY-MADE DEV ELEMENT STYLES
   Opt-in helpers; do not override base unless class is used.
   ------------------------------------------------------------ */
.code-block {
  font-family: var(--font-mono);
  font-size: var(--code-fs);
  line-height: var(--code-lh);
  background: var(--syn-bg);
  color: var(--syn-fg);
  border: 1px solid var(--border);
  border-radius: var(--code-radius);
  padding: var(--code-pad);
  overflow-x: auto;
  tab-size: 2;
}
.code-block .c-key  { color: var(--syn-keyword); }
.code-block .c-str  { color: var(--syn-string); }
.code-block .c-fn   { color: var(--syn-func); }
.code-block .c-num  { color: var(--syn-number); }
.code-block .c-com  { color: var(--syn-comment); font-style: italic; }
.code-block .c-type { color: var(--syn-type); }
.code-block .c-punc { color: var(--syn-punc); }
.code-block .c-tag  { color: var(--syn-tag); }
/* nested <code> inside a code block must not inherit the inline-code chip look */
.code-block code,
pre.code-block code {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

:where(p, li) code, .inline-code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.08em 0.4em;
}

kbd, .kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  line-height: 1;
  display: inline-block;
  padding: 0.32em 0.5em 0.4em;
  background: var(--kbd-bg);
  color: var(--fg1);
  border: 1px solid var(--kbd-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--kbd-shadow);
}

/* Retro 8-bit accent — pixel-hard border, no radius. Gaming dial ~4. */
.pixel-edge {
  border: 3px solid currentColor;
  border-radius: 0;
  box-shadow: 4px 4px 0 currentColor;
  image-rendering: pixelated;
}

/* ============================================================
   Theme: dev — the developer-hub side (arslan.dev).
   Dark, cerulean, monospace-forward. Bundled (by build.mjs) as
   colors_and_type.css + tokens-dev.css + this file. Consumers set
   <html data-theme="dark"> to get the dark palette.

   This block only maps the legacy ak-design contract names onto the
   real design-system tokens, so older consumers (the portfolio, the
   ds-* primitives) keep resolving. Names the system already defines
   (--accent, --accent-2/-3, --border, --border-strong, --font-body,
   --radius-sm) are intentionally NOT aliased.
   ============================================================ */
:root {
  --text:        var(--fg1);
  --text-dim:    var(--fg2);
  --text-faint:  var(--fg3);
  --surface:     var(--bg-elevated);
  --surface-2:   var(--bg-sunken);
  --font-head:   var(--font-display);
  --radius:      var(--radius-md);
  --shadow:      var(--shadow-md);
  --maxw:        var(--max-page);
  --glow:        111, 184, 219;   /* cerulean-300 rgb, for rgba(var(--glow), …) */
}