/* ==========================================================================
   Thread of Iman - design tokens
   Ported verbatim from the brand design system (tokens/*.css).
   Blocksy's own --theme-* variables are mapped onto these at the bottom so
   that core theme UI inherits the brand without being fought.
   ========================================================================== */

:root {
  /* --- Taupe scale (from assets/palette-reference.jpeg) --- */
  --toi-taupe-50: #FAF9F6;
  --toi-taupe-100: #F7F5F1;  /* brand off-white */
  --toi-taupe-200: #EAE4DC;
  --toi-taupe-300: #D6C7BC;  /* signature taupe */
  --toi-taupe-400: #BFB4AB;
  --toi-taupe-500: #A69B92;
  --toi-taupe-600: #8F8A84;  /* grey-taupe */
  --toi-taupe-700: #6B6660;

  /* --- Charcoal / ink --- */
  --toi-ink-900: #1F1F21;
  --toi-ink-800: #2F2F31;    /* brand charcoal */
  --toi-ink-700: #4A4A4C;
  --toi-ink-500: #6E6E70;
  --toi-white: #FFFFFF;

  /* --- Gold, Pantone 871 C. Tagline and fine accents only. --- */
  --toi-gold-600: #6E6140;
  --toi-gold-500: #84754E;
  --toi-gold-400: #A8996E;
  --toi-gold-200: #D8CFB4;

  /* --- Semantic surfaces --- */
  --toi-surface-page: var(--toi-white);
  --toi-surface-tint: var(--toi-taupe-100);
  --toi-surface-taupe: var(--toi-taupe-300);
  --toi-surface-inverse: var(--toi-ink-800);

  /* --- Semantic text --- */
  --toi-text-heading: var(--toi-ink-800);
  --toi-text-body: var(--toi-ink-700);
  --toi-text-muted: var(--toi-taupe-600);
  --toi-text-gold: var(--toi-gold-500);
  --toi-text-on-inverse: var(--toi-taupe-100);

  /* --- Lines and states --- */
  --toi-border-hairline: #E5DFD7;
  --toi-border-input: var(--toi-taupe-400);
  --toi-border-strong: var(--toi-ink-800);
  --toi-focus-ring: var(--toi-gold-500);
  --toi-state-success: #5C6B52;
  --toi-state-error: #8C4A3F;
  --toi-overlay-scrim: rgba(31, 31, 33, .4);

  /* --- Type --- */
  --toi-font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --toi-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --toi-text-xs: 12px;
  --toi-text-sm: 13px;
  --toi-text-base: 15px;
  --toi-text-md: 17px;
  --toi-text-lg: 21px;
  --toi-text-xl: 26px;
  --toi-text-2xl: 34px;
  --toi-text-3xl: 44px;
  --toi-text-4xl: 58px;
  --toi-text-5xl: 76px;

  --toi-leading-tight: 1.08;
  --toi-leading-snug: 1.25;
  --toi-leading-normal: 1.6;

  --toi-tracking-caps: .16em;
  --toi-tracking-wide: .08em;
  --toi-tracking-display: -.01em;

  --toi-weight-body: 400;
  --toi-weight-semibold: 600;
  --toi-weight-bold: 700;

  /* --- Spacing --- */
  --toi-space-1: 4px;
  --toi-space-2: 8px;
  --toi-space-3: 12px;
  --toi-space-4: 16px;
  --toi-space-5: 24px;
  --toi-space-6: 32px;
  --toi-space-7: 48px;
  --toi-space-8: 64px;
  --toi-space-9: 96px;
  --toi-space-10: 128px;
  --toi-space-11: 160px;

  --toi-container-max: 1240px;
  --toi-container-pad: 24px;
  --toi-section-gap: var(--toi-space-10);
  --toi-grid-gutter: 24px;

  /* --- Effects. Sharp corners are a brand rule. --- */
  --toi-radius-0: 0;
  --toi-radius-1: 2px;
  --toi-radius-pill: 999px;
  --toi-shadow-none: none;
  --toi-shadow-lift: 0 16px 48px rgba(31, 31, 33, .14);
  --toi-shadow-toast: 0 8px 28px rgba(31, 31, 33, .16);

  --toi-ease-out: cubic-bezier(.2, .6, .2, 1);
  --toi-dur-1: 150ms;
  --toi-dur-2: 250ms;
  --toi-dur-3: 600ms;
  --toi-hover-fade: .6;
  --toi-img-zoom: 1.04;
}

/* --------------------------------------------------------------------------
   Fluid type. Display sizes step down on narrow viewports so a headline
   never runs past two lines in the first viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
  :root {
    --toi-text-2xl: 30px;
    --toi-text-3xl: 38px;
    --toi-text-4xl: 46px;
    --toi-text-5xl: 58px;
    --toi-section-gap: var(--toi-space-9);
  }
}

@media (max-width: 689.98px) {
  :root {
    --toi-text-xl: 23px;
    --toi-text-2xl: 26px;
    --toi-text-3xl: 32px;
    --toi-text-4xl: 36px;
    --toi-text-5xl: 42px;
    --toi-container-pad: 20px;
    --toi-grid-gutter: 16px;
    --toi-section-gap: var(--toi-space-8);
  }
}

@media (max-width: 400px) {
  :root {
    --toi-text-4xl: 32px;
    --toi-container-pad: 16px;
  }
}

/* --------------------------------------------------------------------------
   Blocksy's own --theme-* variables are deliberately NOT overridden here.

   They are driven by the Customizer (Colors, Typography, Buttons), and the
   matching brand values have been written into those settings instead. If we
   also hardcoded them in this file, changing a colour in the Customizer would
   appear to do nothing, which is a confusing thing to hand someone.

   The Customizer is therefore the single source of truth for Blocksy's own
   chrome, while the --toi-* tokens above drive every custom component. Keep it
   that way: to restyle the theme's UI, edit the Customizer, not this file.
   -------------------------------------------------------------------------- */

/* Blocksy's button radius is a Customizer setting, but sharp corners are a
   brand rule rather than a preference, so it is pinned here on purpose. */
:root {
  --theme-button-border-radius: 0;
  --theme-form-field-border-radius: 0;
}