/* ============================================================
   Tramas del Sur — variables.css
   Design tokens centralizados (fase 1)
   ============================================================ */

:root {
  /* ── Color Primitives ── */
  --ink:           #1e1a17;
  --ink-warm:      #2a241f;
  --ink-soft:      #4a443e;
  --ink-muted:     #8a837a;
  --ink-ghost:     #1e1a171a;

  --orange:        #d95f1a;
  --orange-deep:   #b84d12;
  --orange-light:  #f0813a;
  --orange-glow:   #ff8c3a;
  --orange-soft:   #f0813a20;

  --paper:         #f0ece3;
  --paper-warm:    #f5f0e6;
  --paper-deep:    #e8e2d6;
  --paper-white:   #faf8f4;

  --rule:          #cec8bc;
  --rule-soft:     #cec8bc80;

  --thread:        #d95f1a;
  --thread-soft:   #f0813a20;

  --success:       #2d7a4f;
  --success-bg:    #edf7f1;
  --error:         #c0392b;
  --error-bg:      #fce4e4;

  /* ── Spacing Scale ── */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      2rem;
  --space-lg:      3.5rem;
  --space-xl:      5.5rem;

  /* ── Layout ── */
  --content-max:   1080px;
  --content-pad:   3.5rem;
  --nav-height:    60px;

  /* ── Typography Scale (Modular 1.25) ── */
  --text-xs:       0.6875rem;   /* 11px */
  --text-sm:       0.8125rem;   /* 13px */
  --text-base:     1rem;        /* 16px */
  --text-lg:       1.125rem;    /* 18px */
  --text-xl:       1.25rem;     /* 20px */
  --text-2xl:      1.5625rem;   /* 25px */
  --text-3xl:      1.953rem;    /* 31px */
  --text-4xl:      2.441rem;    /* 39px */

  /* ── Rhythm ── */
  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 1.85;

  /* ── Radius ── */
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     6px;

  /* ── Shadows ── */
  --shadow-xs:     0 1px 2px var(--ink-ghost);
  --shadow-sm:     0 2px 6px var(--ink-ghost);
  --shadow-md:     0 4px 12px var(--ink-ghost);
  --shadow-lg:     0 10px 28px var(--ink-ghost);
  --shadow-xl:     0 16px 40px var(--ink-ghost);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;

  /* ── Z-index ── */
  --z-nav:         100;
  --z-modal:       200;
  --z-tooltip:     300;

  /* ── Noise Texture (inline SVG, ~300 bytes) ── */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");

  /* ── Focus Ring ── */
  --focus-ring:    0 0 0 3px rgba(217, 95, 26, 0.35);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── High Contrast ── */
@media (prefers-contrast: more) {
  :root {
    --rule:          #8a837a;
    --ink-muted:     #5a544e;
    --orange:        #b84d12;
    --paper:         #e8e2d6;
    --focus-ring:    0 0 0 4px #000;
  }
  .nota-card, .edition-card, .red-card, .envio-card {
    border-width: 2px;
  }
}