/* ==========================================================================
   Promptito · base.css
   Design tokens, reset y fundamentos tipográficos.
   ========================================================================== */

:root {
  color-scheme: light;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Superficies y texto */
  --bg: oklch(97.6% 0.007 275);
  --bg-2: oklch(94.5% 0.02 275);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.2% 0.006 275);
  --surface-3: oklch(93.6% 0.01 275);
  --text: oklch(22% 0.02 275);
  --text-2: oklch(44% 0.018 275);
  --text-3: oklch(58% 0.014 275);
  --line: oklch(90.5% 0.008 275);
  --line-strong: oklch(84% 0.012 275);

  /* Marca */
  --brand: oklch(56% 0.21 280);
  --brand-2: oklch(66% 0.18 305);
  --brand-soft: oklch(94.5% 0.04 280);
  --brand-contrast: oklch(99% 0 0);
  --accent: oklch(72% 0.14 200);
  --danger: oklch(57% 0.21 25);
  --danger-soft: oklch(95% 0.035 25);
  --success: oklch(60% 0.15 152);
  --warning: oklch(72% 0.16 75);

  /* Colores de nota */
  --note-lilac: oklch(94.5% 0.04 300);
  --note-lilac-border: oklch(86% 0.06 300);
  --note-mint: oklch(94.5% 0.045 160);
  --note-mint-border: oklch(86% 0.06 160);
  --note-sky: oklch(94.5% 0.04 232);
  --note-sky-border: oklch(86% 0.055 232);
  --note-sand: oklch(95% 0.045 85);
  --note-sand-border: oklch(86.5% 0.06 85);
  --note-peach: oklch(94% 0.05 50);
  --note-peach-border: oklch(85.5% 0.07 50);
  --note-rose: oklch(94% 0.045 18);
  --note-rose-border: oklch(85.5% 0.065 18);

  /* Elevación */
  --shadow-1: 0 1px 2px oklch(20% 0.03 275 / 0.05), 0 6px 18px oklch(20% 0.03 275 / 0.05);
  --shadow-2: 0 10px 30px oklch(20% 0.03 275 / 0.12), 0 2px 6px oklch(20% 0.03 275 / 0.06);
  --shadow-3: 0 28px 70px oklch(10% 0.03 275 / 0.28);

  /* Forma y movimiento */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;
  --ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: 0.26s;

  /* Layout */
  --header-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: oklch(15.5% 0.014 278);
  --bg-2: oklch(21% 0.03 280);
  --surface: oklch(19.5% 0.018 278);
  --surface-2: oklch(23% 0.02 278);
  --surface-3: oklch(27.5% 0.02 278);
  --text: oklch(96% 0.005 278);
  --text-2: oklch(76% 0.012 278);
  --text-3: oklch(62% 0.014 278);
  --line: oklch(28% 0.016 278);
  --line-strong: oklch(34% 0.02 278);

  --brand: oklch(73% 0.16 285);
  --brand-2: oklch(78% 0.13 310);
  --brand-soft: oklch(30% 0.075 285);
  --brand-contrast: oklch(16% 0.03 285);
  --accent: oklch(78% 0.13 200);
  --danger: oklch(70% 0.17 25);
  --danger-soft: oklch(30% 0.075 25);
  --success: oklch(76% 0.14 155);
  --warning: oklch(80% 0.14 80);

  --note-lilac: oklch(27% 0.055 300);
  --note-lilac-border: oklch(36.5% 0.07 300);
  --note-mint: oklch(27% 0.045 160);
  --note-mint-border: oklch(36.5% 0.06 160);
  --note-sky: oklch(27% 0.05 232);
  --note-sky-border: oklch(36.5% 0.065 232);
  --note-sand: oklch(28% 0.04 85);
  --note-sand-border: oklch(37.5% 0.055 85);
  --note-peach: oklch(27.5% 0.055 50);
  --note-peach-border: oklch(37% 0.07 50);
  --note-rose: oklch(27% 0.055 18);
  --note-rose-border: oklch(36.5% 0.07 18);

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3), 0 8px 22px oklch(0% 0 0 / 0.28);
  --shadow-2: 0 12px 34px oklch(0% 0 0 / 0.45), 0 2px 8px oklch(0% 0 0 / 0.3);
  --shadow-3: 0 30px 80px oklch(0% 0 0 / 0.6);
}

/* Reset ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(58vw 40vh at 8% -8%, color-mix(in oklch, var(--brand) 15%, transparent), transparent 70%),
    radial-gradient(52vw 38vh at 104% 4%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 72%);
  background-attachment: fixed;
  overflow: hidden;
  overscroll-behavior: none;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

a {
  color: var(--brand);
  text-underline-offset: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: color-mix(in oklch, var(--brand) 28%, transparent);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Utilidades ------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.i {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  background: var(--bg);
  z-index: 999;
}

/* Scrollbars ------------------------------------------------------------- */
@supports (scrollbar-width: thin) {
  .notes-scroll,
  .markdown-body,
  .editor-pane textarea,
  .md-toolbar,
  .sheet__inner {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--text-3) 40%, transparent);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Movimiento reducido ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}