/* ==========================================================================
   Itavel — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for brand color, surface, spacing, radius, shadow
   and type. Components and editorial styles reference these variables only,
   so the whole brand can be re-tuned from this one file.

   Design direction: refined but warm Japanese travel + language media.
   Off-white background, terracotta + deep-green accents, light beige
   surfaces, dark-gray text. Mobile-first.

   We also map our tokens onto Blocksy's palette variables so the parent
   theme's buttons, links and headings inherit the brand automatically
   WITHOUT editing the parent theme.
   ========================================================================== */

:root {
  /* --- Brand palette --------------------------------------------------- */
  --itavel-bg:            #faf6ef; /* off-white page background            */
  --itavel-surface:       #f3ead9; /* light beige surface (boxes)          */
  --itavel-surface-soft:  #fbf7f0; /* very soft beige tint                 */
  --itavel-card:          #ffffff; /* soft cards sit on the off-white bg   */

  --itavel-terracotta:        #c1603d; /* primary accent                   */
  --itavel-terracotta-dark:   #a44d2e; /* hover / active                   */
  --itavel-terracotta-tint:   #f6e4da; /* terracotta wash for fills        */

  --itavel-green:        #3c5a4b; /* deep green secondary accent           */
  --itavel-green-dark:   #2c4639; /* hover / active                        */
  --itavel-green-tint:   #e2ebe4; /* green wash for fills                  */

  --itavel-text:        #2e2a25; /* dark gray body text                    */
  --itavel-text-soft:   #5e574d; /* muted captions / meta                  */
  --itavel-heading:     #29251f; /* slightly deeper for headings           */

  --itavel-border:      #e7dcc8; /* warm hairline border                   */
  --itavel-border-soft: #efe7d8; /* lighter divider                        */

  --itavel-warning:      #b8862a; /* amber for warning box accents         */
  --itavel-warning-tint: #f7eed6;

  /* --- Radius ---------------------------------------------------------- */
  --itavel-radius-sm: 10px;
  --itavel-radius:    16px;  /* default soft-card radius                   */
  --itavel-radius-lg: 22px;

  /* --- Shadows (soft, warm, never harsh) ------------------------------- */
  --itavel-shadow-sm: 0 2px 8px rgba(46, 42, 37, .06);
  --itavel-shadow:    0 8px 28px rgba(46, 42, 37, .09);
  --itavel-shadow-lg: 0 16px 44px rgba(46, 42, 37, .12);

  /* --- Spacing scale (generous, media-grade rhythm) -------------------- */
  --itavel-space-1: 4px;
  --itavel-space-2: 8px;
  --itavel-space-3: 12px;
  --itavel-space-4: 16px;
  --itavel-space-5: 24px;
  --itavel-space-6: 32px;
  --itavel-space-7: 48px;
  --itavel-space-8: 64px;

  /* --- Type ------------------------------------------------------------ */
  /* System JP stack first; respects whatever Blocksy/Google font loads.  */
  --itavel-font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                      "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
  --itavel-font-accent: "Zen Maru Gothic", "Noto Serif JP", Georgia, serif;

  --itavel-fs-meta:  0.8125rem; /* 13px */
  --itavel-fs-body:  1rem;      /* 16px base; editorial bumps this        */
  --itavel-lh-body:  1.9;       /* airy Japanese line-height              */
  --itavel-measure:  720px;     /* comfortable reading column width        */
}

/* --------------------------------------------------------------------------
   Map Itavel tokens onto Blocksy's CSS palette variables.
   This recolors Blocksy buttons / links / accents brand-wide with zero
   parent-theme edits. Blocksy reads --theme-palette-color-1..8 at runtime.
   ------------------------------------------------------------------------ */
:root {
  --theme-palette-color-1: var(--itavel-terracotta);      /* primary accent */
  --theme-palette-color-2: var(--itavel-terracotta-dark); /* accent hover   */
  --theme-palette-color-3: var(--itavel-heading);         /* headings       */
  --theme-palette-color-4: var(--itavel-text);            /* body text      */
  --theme-palette-color-5: var(--itavel-green);           /* secondary      */
  --theme-palette-color-6: var(--itavel-border);          /* borders        */
  --theme-palette-color-7: var(--itavel-surface);         /* light surface  */
  --theme-palette-color-8: var(--itavel-bg);              /* page bg        */
}