/* ==========================================================================
   TRIVENI — DESIGN TOKENS
   Every colour, font and spacing value the site uses lives here, once.
   To restyle the whole site, change a value in this file — you never need
   to touch index.html / kallar.html / theeram.html to change a colour.
   ========================================================================== */

:root {
  /* ---- Ground -----------------------------------------------------------
     Premium/white direction: pure white is the main page background now
     (was a warm cream in the original design). --paper-soft is a very
     faint warm-white used only to separate alternating sections. */
  --tv-white:      #FFFFFF;
  --tv-paper:      #FFFFFF;   /* main page background */
  --tv-paper-soft: #F8F6F1;   /* alternating section background */
  --tv-sand:       #F1EBDD;   /* subtle warm band, used sparingly */
  --tv-ink:        #10312B;   /* Kallar / brand ink */
  --tv-ink-coast:  #17222B;   /* Theeram ink */
  --tv-ink-footer: #0B1F1B;   /* footer background, both houses */

  /* ---- Property accents ---------------------------------------------
     Never mix teal and sea blue in one element. */
  --tv-teal: #1F6F5C;   /* Kallar accent */
  --tv-sea:  #2E6E8E;   /* Theeram accent */
  --tv-gold: #B8863A;   /* hairlines, eyebrows on dark, hover — never a large fill */
  --tv-gold-light: #DDB062; /* brighter gold for the logo lines on the teal disc (home page) */

  /* ---- Text --------------------------------------------------------- */
  --tv-muted:       #5B6A62;
  --tv-muted-coast: #57646C;
  --tv-on-dark:     #F4F0E6;
  --tv-on-dark-70:  rgba(244, 240, 230, .72);
  --tv-on-dark-62:  rgba(244, 240, 230, .62);
  --tv-on-dark-50:  rgba(244, 240, 230, .50);
  --tv-error:       #8A3A2A;

  /* ---- Hairlines (borders/dividers — no shadows anywhere) ----------- */
  --tv-rule-08: rgba(16, 49, 43, .08);
  --tv-rule-10: rgba(16, 49, 43, .10);
  --tv-rule-12: rgba(16, 49, 43, .12);
  --tv-rule-14: rgba(16, 49, 43, .14);
  --tv-rule-22: rgba(16, 49, 43, .22);
  --tv-rule-dark: rgba(244, 240, 230, .16);

  /* ---- Type ----------------------------------------------------------- */
  --tv-sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;
  --tv-serif: 'Cormorant Garamond', Georgia, serif;

  --tv-track-word:  .30em;
  --tv-track-desc:  .34em;
  --tv-track-nav:   .12em;
  --tv-track-btn:   .14em;
  --tv-track-label: .20em;
  --tv-track-tag:   .28em;

  --tv-h1:    clamp(40px, 6.4vw, 88px);
  --tv-h2:    clamp(30px, 3.4vw, 46px);
  --tv-h2-sm: clamp(28px, 3.2vw, 40px);
  --tv-body:  16px;

  /* ---- Space ------------------------------------------------------- */
  --tv-s1: 4px;   --tv-s2: 8px;   --tv-s3: 14px;  --tv-s4: 18px;
  --tv-s5: 22px;  --tv-s6: 28px;  --tv-s7: 36px;  --tv-s8: 48px;
  --tv-s9: 60px;  --tv-s10: 76px; --tv-s11: 96px; --tv-s12: 110px;

  /* ---- Shape --------------------------------------------------------- */
  --tv-radius-input: 3px;
  --tv-radius-pill:  999px;
  --tv-container:    1240px;
  --tv-gutter:       32px;

  --tv-transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

/* Per-house context: put data-house="theeram" on a page's <body> and every
   component below automatically switches accent, ink and muted colour. */
:root, [data-house="kallar"] {
  --tv-accent: var(--tv-teal);
  --tv-ink-local: var(--tv-ink);
  --tv-muted-local: var(--tv-muted);
}
[data-house="theeram"] {
  --tv-accent: var(--tv-sea);
  --tv-ink-local: var(--tv-ink-coast);
  --tv-muted-local: var(--tv-muted-coast);
}