/* ak-design — bundle: system/colors_and_type.css + themes/personal.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;
}

/* ============================================================
   Theme: personal — the personal/writing side (arslan.land).
   Light, warm paper, stamped shadows. Bundled (by build.mjs) as
   colors_and_type.css + this file (no dark tokens, no data-theme).

   As with the dev theme, this block only maps the legacy ak-design
   contract names onto the real design-system tokens so older
   consumers keep resolving. System-defined names are not re-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:        23, 142, 139;    /* cerulean-500 rgb, for rgba(var(--glow), …) */
}