/* ==========================================================================
   Watershed Automations — Foundations
   Colors + Typography tokens. Import this in any artifact.
   ========================================================================== */

/* ---- Webfonts -------------------------------------------------------------
   Both families load from local brand-uploaded TTFs in fonts/. */

/* Playfair Display — display / headings */
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-Regular.ttf')         format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-Italic.ttf')          format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-Medium.ttf')          format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-MediumItalic.ttf')    format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-SemiBold.ttf')        format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-SemiBoldItalic.ttf')  format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-Bold.ttf')            format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-BoldItalic.ttf')      format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-ExtraBold.ttf')       format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-Black.ttf')           format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-BlackItalic.ttf')     format('truetype'); font-weight:900; font-style:italic; font-display:swap; }

/* Jost — UI / labels / body */
@font-face { font-family:'Jost'; src:url('fonts/Jost-Thin.ttf') format('truetype');         font-weight:100; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-ThinItalic.ttf') format('truetype');   font-weight:100; font-style:italic;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-ExtraLight.ttf') format('truetype');   font-weight:200; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-Light.ttf') format('truetype');        font-weight:300; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-LightItalic.ttf') format('truetype');  font-weight:300; font-style:italic;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-Regular.ttf') format('truetype');      font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-Italic.ttf') format('truetype');       font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-Medium.ttf') format('truetype');       font-weight:500; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-SemiBold.ttf') format('truetype');     font-weight:600; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-Bold.ttf') format('truetype');         font-weight:700; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-BoldItalic.ttf') format('truetype');   font-weight:700; font-style:italic;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-ExtraBold.ttf') format('truetype');    font-weight:800; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-Black.ttf') format('truetype');        font-weight:900; font-style:normal;  font-display:swap; }
@font-face { font-family:'Jost'; src:url('fonts/Jost-BlackItalic.ttf') format('truetype');  font-weight:900; font-style:italic;  font-display:swap; }

:root {
  /* ---- Brand Palette --------------------------------------------------- */
  --parchment:        #F2EDE4;  /* primary background */
  --parchment-deep:   #E8E0D2;  /* card / sunken surface on light */
  --parchment-edge:   #DCD2BF;  /* hairline borders on light */

  --ink:              #1A1510;  /* warm near-black, primary text */
  --ink-brown:        #3D3228;  /* secondary text, ink */
  --ink-soft:         #6B5B4D;  /* tertiary text, muted */
  --ink-whisper:      #A89684;  /* labels, captions */

  --amber:            #C9780C;  /* primary accent */
  --amber-bright:     #E8960A;  /* secondary accent / hover */
  --amber-deep:       #8E5407;  /* pressed / on-light contrast */
  --amber-tint:       #F5DDB8;  /* amber wash background */

  /* Secondary palette (in development) */
  --olive:            #6B6B3A;  /* moss / forest */
  --olive-deep:       #4A4A28;
  --olive-tint:       #C9C9A8;

  --indigo:           #2D3A5C;  /* lake / dusk */
  --indigo-deep:      #1C2540;
  --indigo-tint:      #A9B3C9;

  /* ---- Semantic — Light (default) -------------------------------------- */
  --bg:               var(--parchment);
  --bg-elev:          #FAF6EE;       /* slightly raised: cards, modals */
  --bg-sunken:        var(--parchment-deep);
  --bg-overlay:       rgba(26, 21, 16, 0.55);

  --fg1:              var(--ink);          /* primary text */
  --fg2:              var(--ink-brown);    /* body text */
  --fg3:              var(--ink-soft);     /* secondary */
  --fg4:              var(--ink-whisper);  /* tertiary / labels */

  --accent:           var(--amber);
  --accent-hover:     var(--amber-bright);
  --accent-pressed:   var(--amber-deep);
  --accent-soft:      var(--amber-tint);

  --rule:             var(--parchment-edge);   /* hairline */
  --rule-strong:      var(--ink-soft);

  --selection-bg:     var(--amber-tint);
  --selection-fg:     var(--ink);

  /* ---- Type families --------------------------------------------------- */
  --serif-display:    'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans-ui:          'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --mono:             'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (display-first, editorial) --------------------------- */
  --fs-display:       clamp(56px, 7vw, 112px);   /* hero "WATERSHED" */
  --fs-h1:            clamp(40px, 4.5vw, 72px);
  --fs-h2:            clamp(32px, 3.2vw, 48px);
  --fs-h3:            28px;
  --fs-h4:            22px;
  --fs-body:          17px;
  --fs-body-sm:       15px;
  --fs-label:         12px;       /* tracked-wide UI labels */
  --fs-micro:         10px;

  --lh-display:       1.02;
  --lh-heading:       1.12;
  --lh-body:          1.55;
  --lh-tight:         1.25;

  --tracking-tight:   -0.015em;   /* large display */
  --tracking-normal:  0em;
  --tracking-label:   0.22em;     /* "AUTOMATIONS" treatment */
  --tracking-wide:    0.32em;     /* eyebrows, section markers */

  /* ---- Spacing scale (8pt-ish, but warmer) ----------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 144px;

  /* ---- Radii (mostly square — wabi-sabi favors hard edges) ------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---- Shadows (soft, paper-like; never glossy) ------------------------ */
  --shadow-1: 0 1px 2px rgba(26, 21, 16, 0.04), 0 1px 0 rgba(26, 21, 16, 0.03);
  --shadow-2: 0 2px 6px rgba(26, 21, 16, 0.06), 0 1px 2px rgba(26, 21, 16, 0.04);
  --shadow-3: 0 8px 24px rgba(26, 21, 16, 0.08), 0 2px 4px rgba(26, 21, 16, 0.04);
  --shadow-press: inset 0 1px 2px rgba(26, 21, 16, 0.12);

  /* ---- Motion (calm, never bouncy) ------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   560ms;
}

/* ---- Dark mode ----------------------------------------------------------- */
:root.dark, [data-theme="dark"] {
  --bg:           #1A1510;
  --bg-elev:      #221C15;
  --bg-sunken:    #14100C;
  --bg-overlay:   rgba(0, 0, 0, 0.65);

  --fg1:          #F2EDE4;
  --fg2:          #D8CDB9;
  --fg3:          #A89684;
  --fg4:          #6B5B4D;

  --accent:       var(--amber-bright);
  --accent-hover: #F5A82A;
  --accent-pressed: var(--amber);
  --accent-soft:  rgba(232, 150, 10, 0.16);

  --rule:         #3D3228;
  --rule-strong:  #6B5B4D;
}

/* ==========================================================================
   Semantic element styles — apply these to real elements via @extend or by
   adding class names to your markup. Kept minimal and editorial.
   ========================================================================== */

.ws-display {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.ws-h1 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.ws-h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.ws-h3 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg1);
}

.ws-h4 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--fg1);
}

/* Italic display — used for editorial pull-quotes, soft emphasis */
.ws-display-italic {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
}

.ws-body {
  font-family: var(--sans-ui);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  text-wrap: pretty;
}

.ws-body-sm {
  font-family: var(--sans-ui);
  font-weight: 300;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg2);
}

/* The signature "AUTOMATIONS" label — wide-tracked, light-weight, amber.
   Use for eyebrows, section markers, button labels. */
.ws-label {
  font-family: var(--sans-ui);
  font-weight: 300;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.ws-eyebrow {
  font-family: var(--sans-ui);
  font-weight: 300;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg3);
}

.ws-mono {
  font-family: var(--mono);
  font-size: var(--fs-body-sm);
  color: var(--fg2);
}

/* "AUTOMATIONS" lockup with flanking rules — use beneath WATERSHED titles */
.ws-flanked {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--sans-ui);
  font-weight: 300;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.ws-flanked::before,
.ws-flanked::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

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