/* =============================================================================
   Barakah Games — design tokens
   v2 · light surface with forest bands

   THREE LAYERS. Components read --s-* and --bg-* ONLY.

     --bg-*   BRAND    Barakah Games. Type, space, motion, shape. Hue-free.
     --p-*    PRODUCT  One Step Closer's raw palette. Surface-agnostic.
     --s-*    SURFACE  What a component actually paints with. Switches.

   The site is light. Sections that need the product's world to take over get
   class="on-forest", which swaps the whole --s-* set to the dark values.
   Nothing else changes — same components, same markup.

   Every colour below is contrast-checked. Ratios are in the comments.
   Do not add a value without checking it.

   Duplicated into each repo. Do not package it.
   ============================================================================= */

:root{

  /* ---------------------------------------------------------------------------
     BRAND LAYER — true of any Barakah Games product. Never contains a hue.
     --------------------------------------------------------------------------- */

  --bg-font-display:"Playfair Display", Georgia, serif;
  --bg-font-body:"Montserrat", system-ui, -apple-system, sans-serif;

  --bg-weight-display:400;
  --bg-weight-body:400;
  --bg-weight-secondary:300;

  --bg-size-display-1:clamp(2.25rem, 4.4vw, 3.125rem);
  --bg-size-display-2:clamp(1.75rem, 3.6vw, 2.625rem);
  --bg-size-display-3:clamp(1.125rem, 2vw, 1.5rem);
  --bg-size-body:1.0625rem;      /* 17px — read at night, one-handed */
  --bg-size-body-lg:1.1875rem;
  --bg-size-small:0.9375rem;
  --bg-size-label:0.5625rem;     /* 9px */

  --bg-leading-display:1.14;
  --bg-leading-body:1.65;
  --bg-tracking-display:-0.012em;
  --bg-tracking-label:0.4em;

  --bg-space-2xs:.25rem;  --bg-space-xs:.5rem;   --bg-space-sm:.75rem;
  --bg-space-md:1.25rem;  --bg-space-lg:2rem;    --bg-space-xl:3.5rem;
  --bg-space-2xl:5.5rem;
  --bg-space-section:clamp(3.5rem, 8vw, 6.5rem);
  --bg-measure:34rem;

  /* Shape. Tight radii on a light ground read editorial; large soft radii
     read app-like and cheapen it. Circles stay circles. */
  --bg-radius-sharp:0;
  --bg-radius:4px;
  --bg-radius-lg:8px;
  --bg-radius-full:9999px;
  --bg-hairline:1px;

  --bg-motion-rise:10px;
  --bg-motion-duration:520ms;
  --bg-motion-duration-fast:200ms;
  --bg-motion-ease:cubic-bezier(.22,.61,.36,1);


  /* ---------------------------------------------------------------------------
     PRODUCT PALETTE — One Step Closer. Raw values, no surface meaning.
     These match the PRINTED BOX, not the app. Print is the thing we cannot
     re-render, so print wins. See the note at the bottom of this file.
     --------------------------------------------------------------------------- */

  --p-forest:#3A604A;
  --p-forest-deep:#2F4E3D;
  --p-cream:#F7F3E9;
  --p-terracotta:#C56E5D;
  --p-mustard:#B99A69;

  /* Deck colours, set one — CARD BACKS. Drawn on pastel.
     Background and illustration only, never type. */
  --p-open-book:#E8CFC5;   --p-open-book-ink:#C26C5B;
  --p-deen-talk:#C6D9C9;   --p-deen-talk-ink:#3F6B50;
  --p-quick-connect:#D9CCE2; --p-quick-connect-ink:#6E5C80;
  --p-ramadan:#E9DDB8;     --p-ramadan-ink:#A98842;

  /* Deck colours, set two — THE BOX'S DOT GRID. Drawn on forest, so lighter.
     Sampled off the printed dieline. Used by the 365-dot year grid, which is
     coloured in real deck proportions: 112 / 112 / 111 / 30. */
  --p-dot-open-book:#C56E5D;
  --p-dot-deen-talk:#4C7E64;
  --p-dot-quick-connect:#7D6E9D;
  --p-dot-ramadan:#B99A69;


  /* ---------------------------------------------------------------------------
     SURFACE — LIGHT. The default. Everything paints with these.
     --------------------------------------------------------------------------- */

  --s-ground:#FFFFFF;
  --s-ground-2:#F6F3EE;      /* warm paper, for quiet bands */
  --s-ink:#1F2D26;           /* 14.4 on white · body copy          */
  --s-head:#3A604A;          /*  7.1 on white · headings           */
  --s-ink-2:#55675C;         /*  6.0 on white · secondary          */
  --s-ink-3:#66786D;         /*  4.7 on white · hints, captions    */
  --s-accent:#9A5649;        /*  5.5 on white · links, labels — safe at any size */
  --s-hair:#D8DDD8;
  --s-rule:#C56E5D;          /* the hand-drawn curve, and the headline rule.
                                ADDED on port: home.html draws both with
                                var(--p-terracotta) straight from a component,
                                which non-negotiable 3 forbids. Same value,
                                reached through the surface layer. */
  --s-fill:#C56E5D;          /* button fill — the raw terracotta   */
  --s-fill-ink:#241008;      /*  5.0 on fill                       */
  --s-focus:#9A5649;
}


/* -----------------------------------------------------------------------------
   SURFACE — DARK. Put class="on-forest" on a <section> to hand it over to the
   product's world. Full bleed only; never a tinted box inside a light page.
   ----------------------------------------------------------------------------- */

.on-forest{
  --s-ground:#3A604A;
  --s-ground-2:#2F4E3D;
  --s-ink:#F7F3E9;           /* 6.4 on forest                      */
  --s-head:#F7F3E9;
  --s-ink-2:#DCDED3;         /* 5.2 on forest · secondary          */
  --s-ink-3:#CDD3C6;         /* 4.7 on forest · hints              */
  --s-accent:#D7B37A;        /* 3.6 on forest — LARGE TEXT ONLY.   */
  --s-hair:rgba(247,243,233,.16);
  --s-rule:#C56E5D;
  --s-fill:#C56E5D;
  --s-fill-ink:#241008;
  --s-focus:#D7B37A;

  background:var(--s-ground);
  color:var(--s-ink-2);
}

/* The one rule that is easy to break:
   on a forest section, --s-accent fails AA below 18.66px (or 14px bold).
   Small uppercase labels there use --s-ink-2, NOT --s-accent.
   On the light surface --s-accent is safe at every size. */


/* -----------------------------------------------------------------------------
   BASE
   ----------------------------------------------------------------------------- */

*{box-sizing:border-box}

html{
  background:var(--s-ground);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--s-ground);
  color:var(--s-ink-2);
  font-family:var(--bg-font-body);
  font-weight:var(--bg-weight-secondary);
  font-size:var(--bg-size-body);
  line-height:var(--bg-leading-body);
}

h1,h2,h3{
  font-family:var(--bg-font-display);
  font-weight:var(--bg-weight-display);
  line-height:var(--bg-leading-display);
  letter-spacing:var(--bg-tracking-display);
  color:var(--s-head);
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--bg-size-display-1)}
h2{font-size:var(--bg-size-display-2)}
h3{font-size:var(--bg-size-display-3)}

p{margin:0; max-width:var(--bg-measure)}

/* Headlines are sentence case with a full stop. Never title case, never all caps,
   never a headline without the stop. */

/* Emphasis inside a headline — display size, so the dark-surface accent is safe */
em{font-style:italic; color:var(--s-accent)}

.label{
  font-family:var(--bg-font-body);
  font-size:var(--bg-size-label);
  font-weight:var(--bg-weight-secondary);
  letter-spacing:var(--bg-tracking-label);
  text-transform:uppercase;
  color:var(--s-accent);
  display:block;
}
/* Small label on a forest band: accent is too weak at 9px. */
.on-forest .label{color:var(--s-ink-2)}

.hint{color:var(--s-ink-3); font-size:var(--bg-size-small)}


/* -----------------------------------------------------------------------------
   COMPONENTS — all surface-agnostic
   ----------------------------------------------------------------------------- */

/* Hairline-ruled row. No fills, no cards, no shadows. */
.row{
  border-bottom:var(--bg-hairline) solid var(--s-hair);
  padding-block:var(--bg-space-md);
  background:none;
  border-radius:var(--bg-radius-sharp);
  box-shadow:none;
}

/* Input — transparent, single underline, label permanently above.
   Never a placeholder standing in for a label. */
.field{
  border:0;
  border-bottom:var(--bg-hairline) solid var(--s-hair);
  background:transparent;
  color:var(--s-ink);
  font:inherit;
  padding:var(--bg-space-xs) 0;
  border-radius:0;
  transition:border-color var(--bg-motion-duration-fast) var(--bg-motion-ease);
}
.field:focus{outline:none; border-bottom-color:var(--s-accent)}

/* The one filled thing on any page: the commercial action. */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--bg-font-body);
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1.0625rem 2rem; min-height:54px;
  border-radius:var(--bg-radius-full);
  background:var(--s-fill); color:var(--s-fill-ink);
  border:var(--bg-hairline) solid var(--s-fill);
  text-decoration:none; cursor:pointer;
  transition:filter var(--bg-motion-duration-fast) var(--bg-motion-ease);
}
.btn:hover{filter:brightness(1.05)}
.btn[disabled]{
  background:none; color:var(--s-ink-3);
  border-color:var(--s-hair); cursor:not-allowed; filter:none;
}

/* Everything secondary is hairline. */
.btn-quiet{background:none; color:var(--s-head); border-color:var(--s-hair)}
.btn-quiet:hover{border-color:var(--s-ink-3); filter:none}

/* Nothing carries a fill to show focus, so focus must be explicit. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--s-focus);
  outline-offset:4px;
  border-radius:2px;
}

/* Media slot. Fills one at a time — drop a file in and set the background.
   Designed so an empty slot is quiet, not a hole. */
.slot{
  background:var(--s-ground-2);
  border:var(--bg-hairline) solid var(--s-hair);
  border-radius:var(--bg-radius);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:var(--bg-space-sm); text-align:center;
  padding:var(--bg-space-md);
  overflow:hidden;
}
.slot > img{width:100%; height:100%; object-fit:cover; display:block}
.slot--filled{padding:0; border-color:transparent; background:none}


/* -----------------------------------------------------------------------------
   MOTION — fade and rise. Nothing bounces, nothing spins, no spinner anywhere.
   Everything must read perfectly with motion disabled.
   ----------------------------------------------------------------------------- */

@keyframes bg-enter{
  from{opacity:.001; transform:translateY(var(--bg-motion-rise))}
  to{opacity:1; transform:none}
}
.enter{animation:bg-enter var(--bg-motion-duration) var(--bg-motion-ease) both}

@media (prefers-reduced-motion:reduce){
  .enter{animation:none}
  *{transition-duration:1ms !important; animation-duration:1ms !important}
}


/* =============================================================================
   NOTE — print vs screen

   The product palette above uses the PRINTED values from the packaging spec
   (LongPack Q34439), not the app's values. They had drifted:

       forest      print #3A604A   app #3A5F4A   effectively identical
       cream       print #F7F3E9   app #F8F5F0   effectively identical
       terracotta  print #C56E5D   app #C97B5A   visibly different
       warm accent print #B99A69   app #C9A878   visibly different

   On a white product page the photograph of the box and the Add to Cart button
   land in the same eyeful, so the site follows the box. The box is the thing we
   cannot re-render.

   The APP keeps its own values and stays dark. DESIGN.md describes the app and
   remains correct for it. The site deliberately diverges. Do not "fix" the site
   back to the app's palette.
   ============================================================================= */