/* ==========================================================================
   SOPHICLY DESIGN TOKENS v1.2
   Replaces ACSS (Automatic CSS) plugin.
   Inlined in <head> via child theme — zero extra network requests.

   Sources: ACSS computed values + Sophicly brand definitions.
   Philosophy: Kevin Geary spacing scale + Michael Sevilla editorial whitespace.
   ========================================================================== */

/* =========================================================================
   FONT FACES — Proxima Soft Complete + Playfair Display Complete
   Served from sophicly.b-cdn.net. Inlined here so the browser discovers
   font URLs at the very first <style> block — faster than any external CSS.
   ========================================================================= */

@font-face {
  font-family: 'Proxima Soft Complete';
  src: url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Proxima%20Soft/ProximaSoft-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Soft Complete';
  src: url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Proxima%20Soft/ProximaSoft-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Soft Complete';
  src: url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Proxima%20Soft/ProximaSoft-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Soft Complete';
  src: url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Proxima%20Soft/ProximaSoft-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display Complete';
  src: url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Playfair%20Display/playfairdisplay-italic-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display Complete';
  src: url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Playfair%20Display/playfairdisplay-bolditalic-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================================================================
   TEXT RENDERING — sharper on all screens
   ========================================================================= */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */

:root {

  /* -----------------------------------------------------------------------
     SPACING SCALE — fluid clamp() values from ACSS
     ----------------------------------------------------------------------- */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-xs:  clamp(0.8442rem, calc(-0.0172vw + 0.8481rem), 0.8333rem);
  --space-s:   clamp(1.1253rem, calc(0.1984vw + 1.0807rem), 1.25rem);
  --space-m:   clamp(1.5rem, calc(0.5964vw + 1.3658rem), 1.875rem);
  --space-l:   clamp(1.9995rem, calc(1.293vw + 1.7086rem), 2.8125rem);
  --space-xl:  clamp(2.6653rem, calc(2.4706vw + 2.1094rem), 4.21875rem);
  --space-2xl: clamp(3rem, calc(3.5vw + 2.2rem), 5.625rem);
  --section-space-m: clamp(3rem, calc(4vw + 2rem), 5rem);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — text sizes (fluid)
     ----------------------------------------------------------------------- */
  --text-xs: clamp(0.8125rem, calc(0.0994vw + 0.7901rem), 0.875rem);
  --text-s:  clamp(0.875rem, calc(0.0994vw + 0.8526rem), 0.9375rem);
  --text-m:  clamp(1rem, calc(0.1988vw + 0.9553rem), 1.125rem);
  --text-l:  clamp(1.2rem, calc(0.4765vw + 1.0928rem), 1.4996rem);
  --text-xl: clamp(1.44rem, calc(0.8891vw + 1.24rem), 1.999rem);

  /* -----------------------------------------------------------------------
     FONT FAMILIES
     ----------------------------------------------------------------------- */
  --font-family--display:    'Playfair Display Complete', 'Playfair Display', Georgia, serif;
  --font-family--body:       'Proxima Soft Complete', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family--monospaced: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-family--display);
  --font:         var(--font-family--body);
  --f-primary:    var(--font-family--body);

  /* -----------------------------------------------------------------------
     FONT WEIGHTS
     ----------------------------------------------------------------------- */
  --font-weight--400: 400;
  --font-weight--500: 500;
  --font-weight--700: 700;
  --font-weight--800: 800;

  /* -----------------------------------------------------------------------
     LINE HEIGHTS
     ----------------------------------------------------------------------- */
  --line-height--1:   1em;
  --line-height--1-1: 1.1em;
  --line-height--1-2: 1.2em;
  --line-height--1-3: 1.3em;
  --line-height--1-5: 1.5em;

  /* -----------------------------------------------------------------------
     LETTER SPACING
     ----------------------------------------------------------------------- */
  --letter-spacing--0:   0px;
  --letter-spacing--2:  -0.02em;
  --letter-spacing--3:  -0.03em;
  --letter-spacing--3-5: -0.04em;

  /* -----------------------------------------------------------------------
     NEUTRAL SWATCH SCALE
     ----------------------------------------------------------------------- */
  --swatch--n-100: #f5fcff;
  --swatch--n-200: #e4edf1;
  --swatch--n-300: #d5e1e7;
  --swatch--n-400: #b1c5ce;
  --swatch--n-500: #92a6b0;
  --swatch--n-600: #5f6f77;
  --swatch--n-700: #394247;
  --swatch--n-800: #22282a;
  --swatch--n-900: #171818;

  /* -----------------------------------------------------------------------
     ACCENT SWATCH SCALE
     ----------------------------------------------------------------------- */
  --swatch--a-100: #dcf7fd;
  --swatch--a-200: #9cf0fc;
  --swatch--a-400: #66e8fa;
  --swatch--a-500: #68d4e3;
  --swatch--a-700: #54a1ab;

  /* -----------------------------------------------------------------------
     COLOUR SWATCHES (semantic)
     ----------------------------------------------------------------------- */
  --swatch--blue-100:   #9bf7ff;
  --swatch--red-100:    #fbcdcd;
  --swatch--purple-100: #e2c9fb;
  --swatch--green-100:  #e3ffd1;
  --swatch--yellow-100: #fef3c7;
  --swatch--yellow-400: #f5b731;
  --swatch--purple-400: #8066ff;
  --swatch--red-400:    #ef4466;
  --swatch--green-400:  #1CD991;
  --swatch--blue-400:   #4D76FD;

  /* -----------------------------------------------------------------------
     BRAND COLOURS
     ----------------------------------------------------------------------- */
  --sophicly-teal:       #51dacf;
  --sophicly-purple:     #5333ed;
  --sophicly-green:      #1CD991;
  --sophicly-bright-cyan: #7DF9E9;
  --sophicly-blue:       #4D76FD;
  --sophicly-purple-dark: #2c003e;
  --sophicly-deep-teal:  #41aaa8;
  --sophicly-off-white:  #f5f5f7;

  /* Brand aliases */
  --brand-teal:         #51dacf;
  --brand-teal-light:   #7DF9E9;
  --brand-teal-dark:    #41aaa8;
  --brand-purple:       #5333ed;
  --brand-purple-light: #8066ff;
  --brand-purple-dark:  #2c003e;
  --brand-green:        #1CD991;
  --brand-green-dark:   #17b57a;
  --brand-amber:        #f5b731;
  --brand-red:          #ef4466;
  --brand-blue:         #4D76FD;
  --accent-teal:        #51dacf;

  /* -----------------------------------------------------------------------
     SEMANTIC COLOURS — light theme (default)
     ----------------------------------------------------------------------- */
  --color--background:           #e4edf1;
  --color--text:                 #22282a;
  --color--text-body:            #5f6f77;
  --color--accent:               #66e8fa;
  --color--background-secondary: #f5fcff;
  --color--button-bg:            #394247;
  --color--button-border:        #d5e1e7;
  --color--button-text:          #e4edf1;
  --color--faded-color:          #e4edf1;
  --color--index:                #92a6b0;

  /* -----------------------------------------------------------------------
     TEXT SEMANTIC COLOURS
     ----------------------------------------------------------------------- */
  --text-primary:   #e8e8ea;
  --text-secondary: #9a9a9f;
  --text-muted:     #6a6a70;
  --text-heading:   #22282a;
  --text-body:      #5f6f77;
  --text-dark:      light-dark(#000, #fff);
  --text-light:     light-dark(#fff, #000);

  /* -----------------------------------------------------------------------
     DARK THEME OVERRIDES
     ----------------------------------------------------------------------- */
  --dark--accent:    #66e8fa;
  --dark--index:     #b1c5ce;
  --dark--background: #1c1d1f;
  --dark--text:       #e4edf1;
  --dark--text-body:  #b1c5ce;
  --dark--button-bg:  #66e8fa;

  /* -----------------------------------------------------------------------
     DARK SURFACE SCALE — Sophicly preferred (warm neutral greys)
     ----------------------------------------------------------------------- */
  --bg-body:       #141415;
  --bg-sidebar:    #18191a;
  --bg-card:       #1c1d1f;
  --bg-input:      #222324;
  --bg-card-alt:   #252627;
  --bg-card-hover: #2e2f31;
  --dark-border:   #343440;

  /* Dark theme — extended (used by nav, dropdowns) */
  --dark--background-secondary: #394247;
  --dark--text-accent:    #66e8fa;
  --dark--button-bg-hover: #9cf0fc;
  --dark--button-text:    #22282a;
  --dark--button-border:  #394247;

  /* Grey theme tokens (used by nav, some components) */
  --grey--background: #f5fcff;
  --grey--background-secondary: #b1c5ce;
  --grey--text:       #394247;
  --grey--text-accent: #f5fcff;
  --grey--text-body:  #394247;
  --grey--accent:     #54a1ab;
  --grey--faded-color: #5f6f77;
  --grey--button-bg:   #22282a;
  --grey--button-bg-hover: #171818;
  --grey--button-text: #f5fcff;
  --grey--button-border: #5f6f77;

  /* -----------------------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------------------- */
  --radius:    5px;
  --radius-s:  4px;
  --radius-m:  5px;
  --radius-l:  8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  --border-size--normal: 1px;

  --border-radius--0-25: 0.25em;
  --border-radius--0-5:  0.5em;
  --border-radius--0-75: 0.75em;
  --border-radius--1:    1em;
  --border-radius--1-5:  1.5em;

  /* -----------------------------------------------------------------------
     TRANSITIONS & EASING
     ----------------------------------------------------------------------- */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur:  0.3s;
  --transition-fast:     0.15s ease;
  --transition-cubic:    0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-duration: 0.3s;
  --transition-normal:   0.3s ease;
  --transition-function: ease;

  /* -----------------------------------------------------------------------
     CONTAINER / LAYOUT
     ----------------------------------------------------------------------- */
  --container--small:        42rem;
  --container--small-tablet:  90vw;
  --container--small-mobile:  95vw;
  --container--full-tablet:   90vw;
  --container--full-mobile:   95vw;
  --grid-gap: clamp(1.5rem, calc(0.5964vw + 1.3658rem), 1.875rem);

  /* -----------------------------------------------------------------------
     SPACING CONTAINER SPACERS (used by Etch components)
     ----------------------------------------------------------------------- */
  --spacing-container--spacer-left:  clamp(1rem, 3vw, 2.5rem);
  --spacing-container--spacer-right: clamp(1rem, 3vw, 2.5rem);

  /* -----------------------------------------------------------------------
     SECTION SPACING VARIANTS
     ----------------------------------------------------------------------- */
  --section-space-xs: clamp(1.5rem, calc(2vw + 1rem), 2.5rem);
  --section-space-s:  clamp(2rem, calc(3vw + 1.5rem), 3.5rem);
  --section-space-l:  clamp(4rem, calc(5vw + 3rem), 7rem);
  --section-space-xl: clamp(5rem, calc(6vw + 4rem), 9rem);

  /* -----------------------------------------------------------------------
     CONTAINER WIDTH
     ----------------------------------------------------------------------- */
  --container-width: 1080px;

  /* -----------------------------------------------------------------------
     INTERMEDIARY SIZE TOKENS (used by nav, headings, body definitions)
     ----------------------------------------------------------------------- */
  --common-used--size-0-25: 0.25em;
  --common-used--size-0-5:  0.5em;
  --common-used--size-0-75: 0.75em;
  --common-used--size-1:    1em;
  --common-used--size-1-13: 1.13em;
  --common-used--size-1-25: 1.25em;
  --common-used--size-1-5:  1.5em;
  --common-used--size-2:    2em;
  --common-used--size-3:    3em;
  --common-used--size-4:    4em;
  --common-used--size-6:    6em;
  --common-used--size-8:    8em;
  --common-used--size-10:   10em;
  --common-used--size-14:   14em;

  /* -----------------------------------------------------------------------
     HEADING TYPOGRAPHY — H1
     ----------------------------------------------------------------------- */
  --h1--font-size:       var(--common-used--size-4);
  --h1--font-weight:     var(--font-weight--800);
  --h1--line-height:     var(--line-height--1-1);
  --h1--letter-spacing:  var(--letter-spacing--3);
  --h1--font-family:     var(--font-family--display);

  /* -----------------------------------------------------------------------
     HEADING TYPOGRAPHY — H2
     ----------------------------------------------------------------------- */
  --h2--font-size:       var(--common-used--size-4);
  --h2--font-weight:     var(--font-weight--800);
  --h2--line-height:     var(--line-height--1-1);
  --h2--letter-spacing:  var(--letter-spacing--3);
  --h2--font-family:     var(--font-family--display);

  /* -----------------------------------------------------------------------
     HEADING TYPOGRAPHY — H3
     ----------------------------------------------------------------------- */
  --h3--font-size:       var(--common-used--size-3);
  --h3--font-weight:     var(--font-weight--800);
  --h3--line-height:     var(--line-height--1-1);
  --h3--letter-spacing:  var(--letter-spacing--3-5);
  --h3--font-family:     var(--font-family--display);

  /* -----------------------------------------------------------------------
     HEADING TYPOGRAPHY — H4
     ----------------------------------------------------------------------- */
  --h4--font-size:       2.13em;
  --h4--font-weight:     var(--font-weight--800);
  --h4--line-height:     var(--line-height--1-3);
  --h4--letter-spacing:  var(--letter-spacing--3-5);
  --h4--font-family:     var(--font-family--display);

  /* -----------------------------------------------------------------------
     HEADING TYPOGRAPHY — H5
     ----------------------------------------------------------------------- */
  --h5--font-size:       1.13em;
  --h5--font-weight:     var(--font-weight--700);
  --h5--line-height:     var(--line-height--1-3);
  --h5--letter-spacing:  var(--letter-spacing--2);
  --h5--font-family:     var(--font-family--display);

  /* -----------------------------------------------------------------------
     HEADING TYPOGRAPHY — H6
     ----------------------------------------------------------------------- */
  --h6--font-size:       var(--common-used--size-1);
  --h6--font-weight:     var(--font-weight--700);
  --h6--line-height:     var(--line-height--1-3);
  --h6--letter-spacing:  var(--letter-spacing--0);
  --h6--font-family:     var(--font-family--display);

  /* -----------------------------------------------------------------------
     PARAGRAPH BODY TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --p-body--font-size:        var(--common-used--size-1-13);
  --p-body--font-size-tablet: 18px;
  --p-body--font-size-mobile: 18px;
  --p-body--font-weight:      var(--font-weight--400);
  --p-body--line-height:      var(--line-height--1-5);
  --p-body--letter-spacing:   var(--letter-spacing--0);
  --p-body--font-family:      var(--font-family--body);

  /* -----------------------------------------------------------------------
     PARAGRAPH TINY TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --p-tiny--font-size:        0.85em;
  --p-tiny--font-size-tablet: 14px;
  --p-tiny--font-size-mobile: 14px;
  --p-tiny--font-weight:      var(--font-weight--400);
  --p-tiny--line-height:      var(--line-height--1);
  --p-tiny--letter-spacing:   var(--letter-spacing--0);
  --p-tiny--font-family:      var(--font-family--body);

  /* -----------------------------------------------------------------------
     BUTTON TEXT TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --button-text--font-size:        0.95em;
  --button-text--font-size-tablet: 14px;
  --button-text--font-size-mobile: 14px;
  --button-text--font-family:      var(--font-family--monospaced);
  --button-text--font-weight:      var(--font-weight--500);
  --button-text--line-height:      var(--line-height--1);
  --button-text--letter-spacing:   var(--letter-spacing--3);

  /* -----------------------------------------------------------------------
     SUBTITLE TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --subtitle--font-size:        0.8em;
  --subtitle--font-size-tablet: 13px;
  --subtitle--font-size-mobile: 13px;
  --subtitle--font-family:      var(--font-family--monospaced);
  --subtitle--font-weight:      var(--font-weight--800);
  --subtitle--line-height:      var(--line-height--1);
  --subtitle--letter-spacing:   var(--letter-spacing--3);

  /* -----------------------------------------------------------------------
     SEMANTIC STATUS COLOURS
     ----------------------------------------------------------------------- */
  --success: #1CD991;
  --warning: #f5b731;
  --error:   #ef4466;

  /* -----------------------------------------------------------------------
     BASE COLOURS
     ----------------------------------------------------------------------- */
  --white: #ffffff;
  --black: #000000;
}

/* =========================================================================
   COMPONENT OVERRIDES — replaces ACSS body font-size that nav relied on.
   Loaded globally so every page gets this, no per-page Etch updates needed.
   ========================================================================= */

.nav-component {
  font-size: 1.14vw;
}

@media screen and (min-width: 1921px) {
  .nav-component {
    font-size: 0.75vw;
  }
}

@media screen and (max-width: 960px) {
  .nav-component {
    font-size: 13px;
  }
}
