/* ============================================
   DESIGN TOKENS — Maria Shcherbakova School
   Editorial luxe aesthetic
   ============================================ */

:root{
  /* Color · Editorial paper palette */
  --paper:        #EFE7D8;
  --paper-soft:   #F5EEE0;
  --paper-warm:   #FAF4E6;
  --cream:        #E5DBC6;
  --sand:         #DBCFB4;

  --ink:          #1C1813;
  --ink-soft:     #2B2620;
  --charcoal:     #4A4239;
  --taupe:        #6F6557;
  --mute:         #9A8E7C;

  --rule:         #1C181333;
  --rule-soft:    #1C181318;

  /* Accents */
  --oxblood:      #6B2737;
  --oxblood-deep: #4A1A26;
  --clay:         #B4724E;
  --clay-soft:    #C99878;

  /* States */
  --success:      #4A6B3D;
  --error:        #8B2828;
  --warning:      #B4724E;

  /* Type */
  --serif:        "Fraunces", "Times New Roman", Times, serif;
  --sans:         "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --page-pad:     clamp(20px, 4vw, 56px);
  --max:          1480px;
  --max-narrow:   880px;
  --max-reading:  720px;
  --gutter:       clamp(16px, 2.4vw, 32px);

  /* Radii (we keep things flat — small radii) */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(28,24,19,.06);
  --shadow-md:  0 8px 24px -10px rgba(28,24,19,.18);
  --shadow-lg:  0 30px 60px -30px rgba(28,24,19,.25);
  --shadow-xl:  0 40px 80px -20px rgba(28,24,19,.35);

  /* Motion */
  --ease:       cubic-bezier(.2,.7,.2,1);
  --ease-in:    cubic-bezier(.55,.05,.65,.0);
  --d-fast:     180ms;
  --d-base:     280ms;
  --d-slow:     500ms;

  /* Z-index scale */
  --z-base:     1;
  --z-sticky:   50;
  --z-drawer:   60;
  --z-overlay:  65;
  --z-modal:    70;
  --z-toast:    80;

  color-scheme: light;
}