/* ==========================================================================
   TURTUGA PRODUCTIONS. DESIGN TOKENS
   Single source of truth. Mirrors design/tokens/design-tokens.json.
   Every value here maps 1:1 to an Elementor Global Color / Global Font.
   Nothing elsewhere in the CSS may hardcode a colour, size or spacing value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS. TEMPORARY SYSTEM (see docs/16-prototype-and-elementor-mapping.md)
   Archivo Variable  : all structural type. Neo-grotesque, international modernist.
   Instrument Serif  : statement/quote moments ONLY. Used sparingly.
   Swap point: replace the two @font-face blocks + --tg-font-* below.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

  /* ---------- COLOUR ---------------------------------------------------- */
  /* Elementor Global Colors map 1:1 to these five. */
  --tg-ink:        #0C0C0C;   /* Primary dark surface / text on light        */
  --tg-bone:       #F2F0EB;   /* Primary light surface / text on dark        */
  --tg-graphite:   #63625E;   /* Secondary text, meta. 5.35:1 on bone         */

  /* BRAND GOLD, taken from the official identity (#C2A762).
     It carries 8.39:1 on ink but only 2.05:1 on bone, so bone surfaces use a
     darkened tone of the same hue (4.90:1). Never use --tg-gold on bone.      */
  --tg-gold:       #C2A762;
  --tg-gold-deep:  #7C6531;
  --tg-hairline:   rgba(12, 12, 12, 0.16);
  --tg-hairline-i: rgba(242, 240, 235, 0.20);   /* on ink surfaces           */

  /* Derived, do not add new colours */
  --tg-graphite-i: rgba(242, 240, 235, 0.62);   /* secondary text on ink     */
  --tg-scrim:      linear-gradient(to top, rgba(12,12,12,.74) 0%, rgba(12,12,12,0) 60%);

  /* Per-surface aliases, set by [data-surface]. Components read only these. */
  --surface-bg:     var(--tg-bone);
  --surface-fg:     var(--tg-ink);
  --surface-mute:   var(--tg-graphite);
  --surface-rule:   var(--tg-hairline);
  --surface-accent: var(--tg-gold-deep);
  --surface-mark:   rgba(12, 12, 12, 0.045);   /* watermark strength */

  /* ---------- TYPE ------------------------------------------------------ */
  --tg-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --tg-font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --tg-font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;

  --tg-size-display: clamp(2.75rem, 7.4vw, 8rem);
  --tg-size-h1:      clamp(2.125rem, 5vw, 4.5rem);
  --tg-size-h2:      clamp(1.625rem, 3.1vw, 3rem);
  --tg-size-h3:      clamp(1.1875rem, 1.5vw, 1.625rem);
  --tg-size-lead:    clamp(1.125rem, 1.55vw, 1.5rem);
  --tg-size-body:    clamp(1rem, 0.95vw, 1.0625rem);
  --tg-size-small:   0.8125rem;
  --tg-size-eyebrow: 0.75rem;

  --tg-lh-display: 0.98;
  --tg-lh-tight:   1.08;
  --tg-lh-heading: 1.14;
  --tg-lh-lead:    1.42;
  --tg-lh-body:    1.62;

  --tg-tr-display: -0.035em;
  --tg-tr-h1:      -0.028em;
  --tg-tr-h2:      -0.022em;
  --tg-tr-h3:      -0.014em;
  --tg-tr-body:     0;
  --tg-tr-eyebrow:  0.16em;

  --tg-wt-light:  300;
  --tg-wt-book:   400;
  --tg-wt-medium: 500;

  --tg-measure:      66ch;
  --tg-measure-tight:52ch;

  /* ---------- SPACE ----------------------------------------------------- */
  --tg-s-3xs: 4px;
  --tg-s-2xs: 8px;
  --tg-s-xs:  12px;
  --tg-s-sm:  16px;
  --tg-s-md:  24px;
  --tg-s-lg:  32px;
  --tg-s-xl:  48px;
  --tg-s-2xl: 64px;
  --tg-s-3xl: 96px;

  --tg-section:      clamp(88px, 11.5vw, 208px);
  --tg-section-tight:clamp(64px, 7.5vw, 128px);

  /* ---------- LAYOUT ---------------------------------------------------- */
  --tg-margin:    clamp(22px, 6.2vw, 124px);
  --tg-max:       1560px;
  --tg-gutter:    clamp(20px, 2.2vw, 34px);
  --tg-header-h:  clamp(68px, 6.4vw, 92px);
  /* ---------- LOGO SYSTEM ------------------------------------------------
     Official mark 173.16 x 154.49, wordmark 462.83 x 46.41.
     Clearspace is one third of the mark height on every side.               */
  --tg-mark-h:      clamp(24px, 2.2vw, 34px);   /* header mark               */
  --tg-word-h:      clamp(11px, 0.95vw, 15px);  /* header wordmark           */
  --tg-logo-gap:    clamp(10px, 0.9vw, 14px);
  --tg-logo-clear:  0.34em;                     /* multiple of mark height   */

  /* ---------- BORDER / RADIUS ------------------------------------------- */
  --tg-hair: 1px;
  --tg-radius: 0;
  --tg-radius-input: 0;

  /* ---------- MOTION ---------------------------------------------------- */
  --tg-d-instant: 120ms;
  --tg-d-quick:   240ms;
  --tg-d-base:    400ms;
  --tg-d-slow:    700ms;

  --tg-e-standard: cubic-bezier(.2,.6,.2,1);
  --tg-e-entrance: cubic-bezier(.16,1,.3,1);
  --tg-e-exit:     cubic-bezier(.4,0,1,1);

  --tg-move-sm: 8px;
  --tg-move-md: 16px;

  --tg-z-menu:   200;
  --tg-z-header: 300;   /* above the menu: the close control must stay reachable */
}

/* ---------- SURFACE MODES -------------------------------------------------
   Two surfaces only. Every section declares one; components inherit.
   -------------------------------------------------------------------------- */
[data-surface="bone"] {
  --surface-bg:     var(--tg-bone);
  --surface-fg:     var(--tg-ink);
  --surface-mute:   var(--tg-graphite);
  --surface-rule:   var(--tg-hairline);
  --surface-accent: var(--tg-gold-deep);
  --surface-mark:   rgba(12, 12, 12, 0.055);
}
@media (max-width: 900px) {
  :root { --surface-mark: rgba(12, 12, 12, 0.05); }
}
[data-surface="ink"] {
  --surface-bg:     var(--tg-ink);
  --surface-fg:     var(--tg-bone);
  --surface-mute:   var(--tg-graphite-i);
  --surface-rule:   var(--tg-hairline-i);
  --surface-accent: var(--tg-gold);
  --surface-mark:   rgba(194, 167, 98, 0.16);
}
@media (max-width: 900px) {
  [data-surface="ink"] { --surface-mark: rgba(194, 167, 98, 0.11); }
  [data-surface="bone"] { --surface-mark: rgba(12, 12, 12, 0.045); }
}