/* ============================================================
   DAKKH — Brand Tokens
   A luxury ritual brand. Dark, warm, restrained, deliberate.

   Two palette families, applied by medium:

   ── Digital  (socials, web, editorial, language) ── 9 colors
     Walnut   #513017   primary warm dark
     Bark     #705539   mid brown
     Ember    #7E381A   deep burnt
     Amber    #A05A06   saffron amber
     Caramel  #A86A3F   warm rust
     Olive    #827123   deep olive-gold
     Stone    #B3997C   neutral mid
     Gilt     #C9A557   accent — brass gold (default)
     Citron   #E8D32D   highlight — used very sparingly

   ── Physical (packaging, logo, product) ── 9 colors
     Bitumen     #492512   primary warm dark
     Mahogany    #722811   deep brown-red
     Loam        #876A4C   mid brown
     Saffron     #B2670C   burnt orange
     Wheat       #BD9666   warm tan
     Sand        #C7B49C   neutral light
     Madder      #A93918   deep terracotta
     Terracotta  #DD6838   accent — bright product red (default)
     Vermillion  #E91509   sealing red — used very sparingly

   The two families share a warm, earth-led temperament but live
   in different media. Digital tilts gold; physical tilts red.
   Each surface composition should commit to ONE family.
   ============================================================ */

/* --- Webfonts ---
   Canela   → DISPLAY (48px+, plus 28–48px when composition allows).
              Self-hosted from fonts/Canela-*-Trial.otf (Commercial Type,
              Trial license). Full weight range wired, roman + italic. Hero
              voice: Thin (100) headlines, Black (900) structural heads,
              Thin Italic pull quotes / founder voice.
   Spectral → BODY + mid-size (below 48px). Google Fonts, free. Permanent
              substitute until Canela Text + Canela Deck are licensed. Also
              covers Lyon Text's role (not in the system yet).
   Hanken Grotesk → FUNCTIONAL / all UI copy. Google Fonts, free. Permanent
              substitute until Founders Grotesk is licensed.
*/

/* Canela — production webfonts (Commercial Type), hosted on S3.
   Only the 6 faces this page renders are declared:
   Thin 100 (roman+italic) · Light 300 (roman+italic) · Regular 400 · Medium 500 */
@font-face { font-family:"Canela"; font-weight:100; font-style:normal; font-display:swap;
  src:url("https://dakkh-public.s3.ap-south-1.amazonaws.com/fonts/Canela-Thin-Web.woff2") format("woff2"); }
@font-face { font-family:"Canela"; font-weight:100; font-style:italic; font-display:swap;
  src:url("https://dakkh-public.s3.ap-south-1.amazonaws.com/fonts/Canela-ThinItalic-Web.woff2") format("woff2"); }
@font-face { font-family:"Canela"; font-weight:300; font-style:normal; font-display:swap;
  src:url("https://dakkh-public.s3.ap-south-1.amazonaws.com/fonts/Canela-Light-Web.woff2") format("woff2"); }
@font-face { font-family:"Canela"; font-weight:300; font-style:italic; font-display:swap;
  src:url("https://dakkh-public.s3.ap-south-1.amazonaws.com/fonts/Canela-LightItalic-Web.woff2") format("woff2"); }
@font-face { font-family:"Canela"; font-weight:400; font-style:normal; font-display:swap;
  src:url("https://dakkh-public.s3.ap-south-1.amazonaws.com/fonts/Canela-Regular-Web.woff2") format("woff2"); }
@font-face { font-family:"Canela"; font-weight:500; font-style:normal; font-display:swap;
  src:url("https://dakkh-public.s3.ap-south-1.amazonaws.com/fonts/Canela-Medium-Web.woff2") format("woff2"); }

/* Body + functional faces — Google Fonts, permanent substitutes */
@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  /* ============================================================
     PALETTE — Digital (socials, web, editorial, language)
     ============================================================ */
  --d-walnut:  #513017;   /* primary warm dark */
  --d-bark:    #705539;   /* mid brown */
  --d-ember:   #7E381A;   /* deep burnt */
  --d-amber:   #A05A06;   /* saffron amber */
  --d-caramel: #A86A3F;   /* warm rust */
  --d-olive:   #827123;   /* deep olive-gold */
  --d-stone:   #B3997C;   /* neutral mid */
  --d-gilt:    #C9A557;   /* primary digital accent — brass gold */
  --d-citron:  #E8D32D;   /* highlight (sparing) */

  /* ============================================================
     PALETTE — Physical (packaging, logo, product)
     ============================================================ */
  --p-bitumen:    #492512;  /* primary warm dark */
  --p-mahogany:   #722811;  /* deep brown-red */
  --p-loam:       #876A4C;  /* mid brown */
  --p-saffron:    #B2670C;  /* burnt orange */
  --p-wheat:      #BD9666;  /* warm tan */
  --p-sand:       #C7B49C;  /* neutral light */
  --p-madder:     #A93918;  /* deep terracotta */
  --p-terracotta: #DD6838;  /* primary physical accent */
  --p-vermillion: #E91509;  /* sealing red (rare) */

  /* ============================================================
     SEMANTIC TOKENS — default to the digital family.
     Packaging templates flip these by adding .palette-physical
     on a wrapping element (see end of file).
     ============================================================ */

  /* ----- Surfaces ----- */
  /* Dark — Walnut. Never pure black. */
  --surface-dark:        #513017;   /* Walnut — primary dark canvas */
  --surface-dark-deeper: #492512;   /* recessed/inset on dark (cross-palette to Bitumen) */
  --surface-dark-raised: #705539;   /* Bark — raised plane on dark */

  /* Light — Sand. Never pure white.
     Note: neither palette includes a true off-white; Sand is the
     lightest available tone. Compositions read warmer than before. */
  --surface-light:        #C7B49C;  /* Sand — primary light canvas */
  --surface-light-deeper: #BD9666;  /* Wheat — recessed/inset on light */
  --surface-light-raised: #C7B49C;  /* No lighter tone in palette — same as primary */

  /* ----- Foreground / text ----- */
  /* On dark: Sand-based near-light. Never pure white. */
  --fg-on-dark-1: #C7B49C;   /* Sand — primary text on dark */
  --fg-on-dark-2: #B3997C;   /* Stone — secondary */
  --fg-on-dark-3: #876A4C;   /* Loam — tertiary */
  --rule-on-dark: #705539;   /* Bark — hairline rule on dark */

  /* On light: deep Walnut. Never pure black. */
  --fg-on-light-1: #513017;  /* Walnut — primary text on light */
  --fg-on-light-2: #705539;  /* Bark — secondary text on light */
  --fg-on-light-3: #876A4C;  /* Loam — tertiary / captions on light */
  --rule-on-light: #876A4C;  /* Loam — hairline rule on light */

  /* ----- Accent (single, restrained) -----
     Use ONCE per composition. Never decorative.
     Digital default = Gilt. Physical default = Terracotta. */
  --accent:            #C9A557;  /* Gilt (digital default) */
  --accent-terracotta: #DD6838;  /* Terracotta */
  --accent-amber:      #A05A06;  /* Amber */
  --accent-caramel:    #A86A3F;  /* Caramel */
  --accent-ember:      #7E381A;  /* Ember */
  --accent-olive:      #827123;  /* Olive */
  --accent-saffron:    #B2670C;  /* Saffron (physical) */
  --accent-madder:     #A93918;  /* Madder (physical) */
  --accent-citron:     #E8D32D;  /* Citron — highlight, very sparing */
  --accent-vermillion: #E91509;  /* Vermillion — sealing red, very sparing */

  /* ----- Typefaces -----
     Display = Canela (self-hosted, Trial license — see @font-face above).
     System-serif fallback only matters before the OTFs load. */
  --font-display:    "Canela", "Canela Deck", "Canela Text", Georgia, "Times New Roman", serif;
  --font-body:       "Spectral", "Lyon Text", "Freight Text Pro", Georgia, serif;
  --font-functional: "Hanken Grotesk", "Founders Grotesk", "Libre Franklin", system-ui, sans-serif;

  /* ----- Type scale -----
     Display (Canela) is structural. Body (Spectral, until Canela Text) is for
     reading. Functional (Hanken Grotesk, until Founders Grotesk) is utilitarian. */
  --t-display-xxl: 96px;   /* hero campaign */
  --t-display-xl:  72px;   /* campaign headline */
  --t-display-l:   56px;   /* section opener */
  --t-display-m:   40px;   /* editorial headline */
  --t-display-s:   28px;   /* sub-display / pull quote */

  --t-body-l:      20px;   /* long-form lede */
  --t-body-m:      17px;   /* primary body */
  --t-body-s:      15px;   /* secondary body */

  --t-func-m:      14px;   /* labels, captions */
  --t-func-s:      12px;   /* micro-copy */
  --t-func-xs:     11px;   /* spaced caps */

  /* Leading — generous, never tight on body */
  --lh-display: 1.05;
  --lh-editorial: 1.15;
  --lh-body: 1.55;
  --lh-functional: 1.4;

  /* Tracking — display rests, functional is spaced */
  --track-display: -0.005em;
  --track-body: 0;
  --track-func-caps: 0.16em;  /* uppercase labels */
  --track-func: 0.02em;

  /* ----- Spacing (generous, intentional) ----- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ----- Rule weights ----- */
  --rule-hair: 0.5px;
  --rule-thin: 1px;
  --rule-med:  2px;

  /* ----- Radii -----
     The brand resists soft rounding. Sharp corners or near-sharp only. */
  --radius-0: 0;
  --radius-1: 1px;
  --radius-2: 2px;

  /* ----- Motion -----
     Slow, deliberate, no bounces. Stillness as a standard. */
  --ease-deliberate: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick:  180ms;
  --dur-medium: 320ms;
  --dur-slow:   520ms;
}

/* ============================================================
   PHYSICAL PALETTE OVERRIDE
   Add class="palette-physical" to a wrapping element (typically
   <body> in a packaging/logo/product template) to flip semantic
   tokens onto the physical family.
   ============================================================ */
.palette-physical {
  --surface-dark:        #492512;  /* Bitumen */
  --surface-dark-deeper: #492512;  /* No deeper available — same as primary */
  --surface-dark-raised: #722811;  /* Mahogany */

  --surface-light:        #C7B49C; /* Sand */
  --surface-light-deeper: #BD9666; /* Wheat */
  --surface-light-raised: #C7B49C; /* No lighter — same */

  --fg-on-dark-1: #C7B49C;  /* Sand */
  --fg-on-dark-2: #BD9666;  /* Wheat */
  --fg-on-dark-3: #876A4C;  /* Loam */
  --rule-on-dark: #722811;  /* Mahogany */

  --fg-on-light-1: #492512; /* Bitumen */
  --fg-on-light-2: #722811; /* Mahogany */
  --fg-on-light-3: #876A4C; /* Loam */
  --rule-on-light: #876A4C; /* Loam */

  --accent: #DD6838;        /* Terracotta */
}

/* ============================================================
   Semantic / element styles
   ============================================================ */

/* Surfaces */
.surface-dark  { background: var(--surface-dark);  color: var(--fg-on-dark-1); }
.surface-light { background: var(--surface-light); color: var(--fg-on-light-1); }

/* Headlines — Canela (display) */
.h-display-xxl,
.h-display-xl,
.h-display-l,
.h-display-m,
.h-display-s {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  text-wrap: balance;
  font-feature-settings: "liga", "dlig", "onum";
}
.h-display-xxl { font-size: var(--t-display-xxl); }
.h-display-xl  { font-size: var(--t-display-xl); }
.h-display-l   { font-size: var(--t-display-l); }
.h-display-m   { font-size: var(--t-display-m); line-height: var(--lh-editorial); }
.h-display-s   { font-size: var(--t-display-s); line-height: var(--lh-editorial); }

/* Body — Spectral (until Canela Text) */
.body-l, .body-m, .body-s {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  text-wrap: pretty;
  font-feature-settings: "liga", "onum";
}
.body-l { font-size: var(--t-body-l); }
.body-m { font-size: var(--t-body-m); }
.body-s { font-size: var(--t-body-s); }

/* Functional — Hanken Grotesk (until Founders Grotesk) */
.func-m, .func-s, .func-xs {
  font-family: var(--font-functional);
  font-weight: 500;
  line-height: var(--lh-functional);
  letter-spacing: var(--track-func);
}
.func-m  { font-size: var(--t-func-m); }
.func-s  { font-size: var(--t-func-s); }
.func-xs { font-size: var(--t-func-xs); }

/* Spaced caps — the brand's small-text fingerprint */
.caps {
  font-family: var(--font-functional);
  text-transform: uppercase;
  letter-spacing: var(--track-func-caps);
  font-weight: 500;
  font-size: var(--t-func-xs);
}

/* Pull quote — Canela Thin Italic (founder voice / pull quotes) */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-display-s);
  line-height: var(--lh-editorial);
  letter-spacing: var(--track-display);
}

/* Hairline rule — the brand's structural divider */
.rule-dark  { border: 0; border-top: var(--rule-thin) solid var(--rule-on-dark); }
.rule-light { border: 0; border-top: var(--rule-thin) solid var(--rule-on-light); }

/* Accent mark — for the ONE element of structural importance */
.accent      { color: var(--accent); }
.accent-rule { border: 0; border-top: var(--rule-med) solid var(--accent); width: 32px; }