/* ==========================================================================
   PAK SHILAJIT — DESIGN TOKENS
   The ONLY file allowed to declare raw values. Everything else references
   these variables. If you are about to type a hex code or a pixel value
   outside this file, stop — you are breaking the design contract (§5B).
   ========================================================================== */

:root {

  /* --- COLOUR ------------------------------------------------------------
     WCAG AA verified. Contrast ratios noted against --bg unless stated.   */

  --bg:            #FFFFFF;   /* Page background — pure white (owner, 12 Aug; was warm #FAF7F2) */
  --surface:       #FFFFFF;   /* Paper     — cards, tiles                    */
  --surface-2:     #F6F6F4;   /* Neutralised with the white page (was warm #F1EDE5) */
  --line:          #E2DCD1;   /* Hairline  — every border on the site        */
  --line-strong:   #CFC6B7;   /* Hairline+ — dividers that need to read      */

  --ink:           #17130E;   /* Headlines + body        17.3:1 on bg        */
  --ink-soft:      #5B544A;   /* Secondary copy           6.99:1 on bg       */

  --accent:        #FDB913;   /* Amber — CTA fills, badges, stars            */
  --accent-hover:  #E9A806;   /* Amber pressed/hover                         */
  --accent-deep:   #8F5A04;   /* Bronze — amber AS TEXT   5.41:1 on bg       */
  --accent-wash:   #FEF6E0;   /* Amber tint — highlight blocks               */

  --band:          #0C0B0A;   /* Obsidian — one dark section per page        */
  --on-band:       #FAF7F2;   /* Bone on obsidian        16.8:1              */
  --on-band-soft:  #A79E95;   /* Ash on obsidian          7.46:1             */
  --band-line:     #2A2622;   /* Hairline inside dark bands                  */

  --ok:            #2F6B3C;
  --warn:          #8F5A04;
  --err:           #A32020;

  /* THE AMBER RULE — restated because it is the easiest rule to break:
     amber fill ALWAYS takes --ink text (10.67:1).
     White on amber is 1.73:1 and fails every standard. Never do it. */


  /* --- SPACING SCALE -----------------------------------------------------
     The only permitted spacing values in the entire theme.
     Component-internal: 1–5.  Between components: 5–6.  Sections: 8–10.   */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;   /* the gap between two adjacent buttons — never varies   */
  --sp-4:  16px;
  --sp-5:  24px;   /* minimum clearance on all four sides of any button     */
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;   /* section rhythm, mobile                                */
  --sp-9:  96px;   /* section rhythm, desktop                               */
  --sp-10: 128px;  /* the one deliberate open moment per page               */


  /* --- LAYOUT ------------------------------------------------------------ */

  --container:      1240px;
  --container-tight: 940px;   /* long-form pages                            */
  --measure:        68ch;     /* max line length for body copy, sitewide    */
  --gutter:         var(--sp-5);
  --header-h:       72px;
  --bar-h:          44px;   /* = minimum touch target, so the bar's own
                               controls never need an exception */


  /* --- TYPE --------------------------------------------------------------
     Single family sitewide. Instrument Sans, self-hosted.
     Two values in the scale = mobile / desktop.                            */

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Arial, sans-serif;

  --fs-h1:    40px;   --fs-h1-d:  clamp(44px, 4.4vw, 60px);
  --fs-h2:    30px;   --fs-h2-d:  clamp(32px, 2.8vw, 38px);
  --fs-h3:    22px;   --fs-h3-d:  24px;
  --fs-h4:    18px;
  --fs-body:  16px;
  --fs-lead:  18px;   --fs-lead-d: 19px;
  --fs-small: 14px;
  --fs-micro: 10.5px;

  --lh-tight: 1.08;
  --lh-head:  1.16;
  --lh-body:  1.6;

  --tr-h1: -0.035em;
  --tr-h2: -0.03em;
  --tr-h3: -0.025em;
  --tr-h4: -0.02em;
  --tr-micro: 0.2em;
  --tr-btn:   0.14em;

  --fw-body: 400;
  --fw-med:  500;
  --fw-head: 600;
  --fw-bold: 700;


  /* --- BUTTON GEOMETRY (locked — §5B.2) ----------------------------------
     Every button on every page resolves to these. No page overrides them. */

  --btn-h:       48px;
  --btn-h-mob:   52px;
  --btn-pad-x:   var(--sp-5);
  --btn-fs:      11.5px;
  --btn-fw:      700;
  --btn-tr:      var(--tr-btn);
  --btn-radius:  6px;   /* matches --radius (owner, 13 Aug: gentle curve) */

  --input-h:     48px;   /* deliberately equal to --btn-h                   */


  /* --- SHAPE + LINE ------------------------------------------------------ */

  --radius:    6px;    /* gently rounded (owner, 13 Aug — was 2px squared)  */
  --radius-lg: 10px;   /* cards, videos, dialogs (was 3px)                  */
  --border:    1px solid var(--line);

  /* Shadows exist ONLY under product imagery, where they're physically
     justified. Never on cards, never on hover, never on buttons. */
  --shadow-product: 0 24px 48px -24px rgba(23, 19, 14, .28);


  /* --- MOTION ------------------------------------------------------------ */

  --dur-fast:  .16s;
  --dur:       .26s;
  --dur-slow:  .42s;
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  --z-drawer: 90;
  --z-header: 70;
  --z-bar:    60;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--sp-7);
    --header-h: 84px;
  }
}

/* Arabic / RTL: no second stylesheet. The entire theme uses logical
   properties, so this is all that is required. */
[dir="rtl"] {
  --tr-h1: -0.01em;
  --tr-h2: -0.01em;
  --tr-h3: 0;
  --tr-h4: 0;
}