/* =============================================================================
   tokens.css — the one file to change the look of the site
   =============================================================================
   Every colour, typeface, size, space and motion setting on bellart.gallery is
   declared here and nowhere else. Nothing below this file hardcodes a hex code
   or a pixel font-size; they all read these variables.

   That is the whole point of the rebuild: this used to be copy-pasted into
   five separate HTML files, so "make the site warmer" meant five edits and a
   guarantee that one would drift. Now it is one edit here.

   Values are unchanged from the original design — the site looks identical.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour */
  --white:      #FFFFFF;
  --grey-bg:    #FAFAFA;
  --ink:        #111111;
  --grey:       #666666;
  --border:     #EAEAEA;

  /* Roles, so components ask for a job rather than a shade. Change a role and
     everything using it follows. */
  --bg:            var(--white);
  --bg-sunk:       var(--grey-bg);
  --text:          var(--ink);
  --text-muted:    var(--grey);
  --rule:          var(--border);
  --btn-bg:        var(--ink);
  --btn-text:      var(--white);
  --overlay:       rgba(255, 255, 255, .92);
  --scrim:         rgba(17, 17, 17, .32);
  --nav-bg:        rgba(255, 255, 255, .85);
  --toolbar-bg:    rgba(255, 255, 255, .90);
  --card-veil:     rgba(255, 255, 255, .94);
  --hairline:      rgba(0, 0, 0, .06);
  --hairline-firm: rgba(0, 0, 0, .10);
  --checkbox:      #C9C9C9;

  /* Small-screen type gets a touch darker for legibility. */
  --text-muted-sm: #555555;
  --icon-sm:       #3A3A3A;

  /* ------------------------------------------------------------ typography */
  --font-ui:      'Archivo', 'Noto Naskh Arabic', -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-ui);
  --font-arabic:  'Noto Naskh Arabic', var(--font-ui);

  --text-base:   18px;
  --leading:     1.65;
  --weight-body: 400;
  --weight-med:  500;
  --weight-bold: 600;

  /* Fluid headings. clamp(min, preferred, max). */
  --h1: clamp(42px, 5vw,   68px);
  --h2: clamp(30px, 3vw,   42px);
  --h3: clamp(22px, 2.2vw, 30px);

  --size-lead:  17px;
  --size-body:  16px;
  --size-sm:    14.5px;
  --size-xs:    13.5px;
  --size-2xs:   12.5px;
  --size-micro: 11.5px;

  --track-tight: -.02em;
  --track-label: .16em;
  --track-btn:   .1em;
  --track-nav:   .06em;

  /* ------------------------------------------------------------- structure */
  --content: 1400px;   /* text and grid column width */
  --max:     1600px;   /* full-bleed chrome, e.g. the nav bar */
  --gutter:  40px;
  --gutter-sm: 22px;

  --section-y:       150px;
  --section-y-tight: 120px;
  --section-y-sm:    96px;

  --radius: 0;         /* the design is deliberately square-cornered */

  /* ---------------------------------------------------------------- motion */
  --ease:      cubic-bezier(.25, .6, .3, 1);
  --dur-fast:  .3s;
  --dur:       .45s;
  --dur-slow:  1.2s;
  --dur-fade:  1s;

  /* --------------------------------------------------------------- shadows */
  --shadow-panel: 0 18px 60px rgba(0, 0, 0, .10);
  --shadow-menu:  0 14px 44px rgba(0, 0, 0, .08);
}

/* Narrow screens: firmer weights and tighter gutters. Kept as token overrides
   so component CSS never needs its own breakpoint for this. */
@media (max-width: 760px) {
  :root {
    --weight-body: 450;
    --gutter:      var(--gutter-sm);
    --section-y:       var(--section-y-sm);
    --section-y-tight: var(--section-y-sm);
    --text-muted:  var(--text-muted-sm);
  }
}