/* =========================================================
   Cristian De La Hoz — Design System
   colors_and_type.css
   Solarized-based palette · DM Sans + JetBrains Mono
   ========================================================= */

/* ---------- Font faces ---------- */
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   SOLARIZED PALETTE — raw tokens
   Ethan Schoonover's original 16-color scheme.
   ========================================================= */
:root {
  /* Base tones (dark → light) */
  --sol-base03:  #002b36; /* darkest background */
  --sol-base02:  #073642; /* dark background highlight */
  --sol-base01:  #586e75; /* content tone / dark emphasis */
  --sol-base00:  #657b83; /* content tone / light emphasis */
  --sol-base0:   #839496; /* body text on dark */
  --sol-base1:   #93a1a1; /* emphasized text on dark / comments on light */
  --sol-base2:   #eee8d5; /* light background highlight */
  --sol-base3:   #fdf6e3; /* lightest background */

  /* Accents */
  --sol-yellow:  #b58900;
  --sol-orange:  #cb4b16;
  --sol-red:     #dc322f;
  --sol-magenta: #d33682;
  --sol-violet:  #6c71c4;
  --sol-blue:    #268bd2;
  --sol-cyan:    #2aa198;
  --sol-green:   #859900;

  /* ---------- Type scale ---------- */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid-ish scale (desktop-first) */
  --fs-12: 0.75rem;    /* 12px */
  --fs-13: 0.8125rem;  /* 13px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-16: 1rem;       /* 16px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-20: 1.25rem;    /* 20px */
  --fs-24: 1.5rem;     /* 24px */
  --fs-30: 1.875rem;   /* 30px */
  --fs-36: 2.25rem;    /* 36px */
  --fs-48: 3rem;       /* 48px */
  --fs-64: 4rem;       /* 64px */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:   0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------- Spacing (4px grid) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hair: 1px;
  --border-thick: 2px;

  /* ---------- Dot pattern (signature background texture) ---------- */
  --dot-size: 1px;
  --dot-gap:  22px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================
   SEMANTIC TOKENS — dark mode default (Solarized Dark)
   Background: base03, content: base0/base1
   ========================================================= */
:root,
:root[data-theme="dark"] {
  /* Backgrounds */
  --bg:          var(--sol-base03);   /* page */
  --bg-elev-1:   var(--sol-base02);   /* cards, panels */
  --bg-elev-2:   #0a3f4c;             /* hover / selected — tuned between base02 and base01 */
  --bg-inset:    #001e26;             /* inputs, code blocks, deeper wells */

  /* Foregrounds */
  --fg:          var(--sol-base0);    /* body */
  --fg-strong:   var(--sol-base1);    /* titles, emphasis */
  --fg-muted:    var(--sol-base01);   /* meta, captions */
  --fg-faint:    #405862;             /* disabled / dividers-on-text */

  /* Borders / dividers */
  --border:      #0f4553;             /* subtle divider */
  --border-strong: var(--sol-base01);
  --dot-color:   rgba(147, 161, 161, 0.14); /* base1 @ low opacity */

  /* Accents (used as-is) */
  --accent:      var(--sol-blue);
  --accent-hover:#3ea0de;
  --accent-press:#1f78bb;
  --link:        var(--sol-blue);
  --link-hover:  var(--sol-cyan);

  /* Semantic states */
  --success:     var(--sol-green);
  --warning:     var(--sol-yellow);
  --danger:      var(--sol-red);
  --info:        var(--sol-cyan);

  /* Selection / highlight */
  --selection-bg: rgba(38, 139, 210, 0.35);
  --selection-fg: var(--sol-base3);

  /* Shadows — subtle, cool-toned */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-ring: 0 0 0 3px rgba(38, 139, 210, 0.35);

  color-scheme: dark;
}

/* =========================================================
   SEMANTIC TOKENS — light mode (Solarized Light)
   Background: base3, content: base00/base01
   ========================================================= */
:root[data-theme="light"] {
  --bg:          var(--sol-base3);
  --bg-elev-1:   #f7f1dc;             /* between base3 and base2 */
  --bg-elev-2:   var(--sol-base2);
  --bg-inset:    #f3ecd1;

  --fg:          var(--sol-base00);
  --fg-strong:   var(--sol-base01);
  --fg-muted:    var(--sol-base1);
  --fg-faint:    #b9b39f;

  --border:      #e4dcc1;
  --border-strong: var(--sol-base1);
  --dot-color:   rgba(88, 110, 117, 0.16); /* base01 @ low opacity */

  --accent:      var(--sol-blue);
  --accent-hover:#1f78bb;
  --accent-press:#196399;
  --link:        var(--sol-blue);
  --link-hover:  var(--sol-magenta);

  --success:     var(--sol-green);
  --warning:     var(--sol-yellow);
  --danger:      var(--sol-red);
  --info:        var(--sol-cyan);

  --selection-bg: rgba(38, 139, 210, 0.22);
  --selection-fg: var(--sol-base03);

  --shadow-sm: 0 1px 2px rgba(7, 54, 66, 0.08);
  --shadow-md: 0 4px 14px rgba(7, 54, 66, 0.10);
  --shadow-lg: 0 16px 48px rgba(7, 54, 66, 0.14);
  --shadow-ring: 0 0 0 3px rgba(38, 139, 210, 0.28);

  color-scheme: light;
}

/* System-pref fallback (when no data-theme set explicitly) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:          var(--sol-base3);
    --bg-elev-1:   #f7f1dc;
    --bg-elev-2:   var(--sol-base2);
    --bg-inset:    #f3ecd1;
    --fg:          var(--sol-base00);
    --fg-strong:   var(--sol-base01);
    --fg-muted:    var(--sol-base1);
    --fg-faint:    #b9b39f;
    --border:      #e4dcc1;
    --border-strong: var(--sol-base1);
    --dot-color:   rgba(88, 110, 117, 0.16);
    --accent-hover:#1f78bb;
    --accent-press:#196399;
    --link-hover:  var(--sol-magenta);
    --selection-bg: rgba(38, 139, 210, 0.22);
    --selection-fg: var(--sol-base03);
    --shadow-sm: 0 1px 2px rgba(7, 54, 66, 0.08);
    --shadow-md: 0 4px 14px rgba(7, 54, 66, 0.10);
    --shadow-lg: 0 16px 48px rgba(7, 54, 66, 0.14);
    --shadow-ring: 0 0 0 3px rgba(38, 139, 210, 0.28);
    color-scheme: light;
  }
}

/* =========================================================
   BASE ELEMENTS — semantic defaults
   ========================================================= */
html { font-family: var(--font-sans); }

body {
  background-color: var(--bg);
  /* Signature dot-pattern texture */
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ---------- Headings: monospaced, tight tracking ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-mono);
  color: var(--fg-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  margin: 0;
}

h1, .h1 { font-size: var(--fs-48); font-weight: var(--weight-semibold); }
h2, .h2 { font-size: var(--fs-36); font-weight: var(--weight-semibold); }
h3, .h3 { font-size: var(--fs-24); font-weight: var(--weight-medium); }
h4, .h4 { font-size: var(--fs-20); font-weight: var(--weight-medium); }
h5, .h5 { font-size: var(--fs-16); font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); }
h6, .h6 {
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- Display (hero) ---------- */
.display {
  font-family: var(--font-mono);
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--fg-strong);
}

/* ---------- Body ---------- */
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg);
  margin: 0;
}
.p-lg { font-size: var(--fs-18); line-height: var(--lh-loose); }
.p-sm { font-size: var(--fs-14); line-height: var(--lh-base); color: var(--fg-muted); }

/* ---------- Inline code + blocks ---------- */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-inset);
  color: var(--sol-cyan);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
pre {
  background: var(--bg-inset);
  color: var(--fg-strong);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow-x: auto;
  line-height: var(--lh-snug);
  font-size: var(--fs-14);
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

/* ---------- Meta / caption / label ---------- */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-snug);
}
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- Links ---------- */
a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--radius-sm);
}

/* ---------- Utility: prompt glyph ---------- */
.prompt::before {
  content: "$ ";
  color: var(--sol-green);
  font-family: var(--font-mono);
}
.prompt-cyan::before { content: "~ "; color: var(--sol-cyan); font-family: var(--font-mono); }
.prompt-magenta::before { content: "› "; color: var(--sol-magenta); font-family: var(--font-mono); }