/* =========================================================
   LinesheetPro: Design Tokens
   Palette sampled from reference: muted, sophisticated
   pastels (dusty coral, sage, marigold, periwinkle) over
   warm paper with a soft charcoal ink.
   ========================================================= */

:root {
  /* ---- The four ---- */
  --clay:       #CE8879;   /* dusty coral / terracotta rose  */
  --clay-soft:  #E2AEA3;
  --clay-deep:  #B06B5D;

  --sage:       #A9B49B;   /* muted olive-sage               */
  --sage-soft:  #C6CDBA;
  --sage-deep:  #8B9880;

  --gold:       #EFC141;   /* warm marigold                  */
  --gold-soft:  #F6DA8E;
  --gold-deep:  #D3A521;

  --peri:       #98A3C7;   /* dusty periwinkle               */
  --peri-soft:  #BAC2DC;
  --peri-deep:  #7B88B4;

  /* bridging mauve, used sparingly */
  --mauve:      #C0AEBA;
  --mauve-deep: #A28D9C;

  /* ---- Aliases kept for component readability ---- */
  --pink:        var(--clay-soft);
  --pink-deep:   var(--clay);
  --blue:        var(--peri-soft);
  --blue-deep:   var(--peri);
  --yellow:      var(--gold-soft);
  --yellow-deep: var(--gold);
  --mint:        var(--sage-soft);
  --mint-deep:   var(--sage);
  --lilac:       var(--mauve);
  --lilac-deep:  var(--mauve-deep);
  --peach:       #EFC7AC;

  /* ---- Surfaces ---- */
  --shell:       #F8F5EF;  /* warm paper, page base         */
  --shell-warm:  #F2EDE3;  /* alternating band               */
  --shell-deep:  #E9E2D5;  /* wells, card grounds            */
  --paper:       #FDFBF7;  /* the sheets themselves          */

  /* ---- Ink (warm charcoal, never pure black) ---- */
  --cocoa:       #2C2825;
  --cocoa-deep:  #1D1A17;
  --cocoa-mid:   #6B635A;
  --cocoa-soft:  #9C9389;
  --cocoa-line:  #DFD8CB;

  /* ---- Semantic ---- */
  --bg:      var(--shell);
  --fg:      var(--cocoa);
  --accent:  var(--clay);
  --focus:   var(--peri-deep);

  /* ---- Type ---- */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
                  Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo,
                  Consolas, monospace;

  --fs-mega:    clamp(3.4rem, 12.5vw, 13rem);
  --fs-display: clamp(2.9rem, 8.2vw, 7.5rem);
  --fs-h1:      clamp(2.4rem, 6vw, 5rem);
  --fs-h2:      clamp(2rem,   4.4vw, 3.5rem);
  --fs-h3:      clamp(1.35rem, 2.1vw, 1.85rem);
  --fs-h4:      clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-lead:    clamp(1.1rem, 1.55vw, 1.4rem);
  --fs-body:    clamp(0.975rem, 1.02vw, 1.075rem);
  --fs-sm:      0.875rem;
  --fs-label:   0.6875rem;

  --lh-tight:   0.94;
  --lh-snug:    1.1;
  --lh-body:    1.62;

  --tr-label:   0.16em;
  --tr-tight:   -0.025em;

  /* ---- Layout ---- */
  --maxw:       1420px;
  --maxw-text:  62ch;
  --gutter:     clamp(1.25rem, 4.2vw, 4.5rem);
  --section-y:  clamp(5.5rem, 11vw, 11rem);

  /* ---- Radii ---- */
  --r-xs: 3px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* ---- Elevation (warm, never grey) ---- */
  --sh-sm:  0 1px 2px rgba(44, 40, 37, .06),
            0 3px 8px rgba(44, 40, 37, .05);
  --sh-md:  0 2px 6px rgba(44, 40, 37, .06),
            0 12px 28px rgba(44, 40, 37, .09);
  --sh-lg:  0 4px 12px rgba(44, 40, 37, .07),
            0 26px 60px rgba(44, 40, 37, .14);
  --sh-xl:  0 8px 20px rgba(44, 40, 37, .08),
            0 48px 110px rgba(44, 40, 37, .20);

  /* ---- Motion ---- */
  --e-out:    cubic-bezier(.16, 1, .3, 1);
  --e-inout:  cubic-bezier(.66, 0, .34, 1);
  --e-spring: cubic-bezier(.34, 1.42, .64, 1);
  --t-fast:   .22s;
  --t-med:    .45s;
  --t-slow:   .9s;

  /* ---- Texture: a whisper of press grain, nothing more ---- */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  /* Sheet proportions (A4) */
  --sheet-w: 1000;
  --sheet-h: 1294;
}