/* ==========================================================================
   GOLDEN TOUCH BARBER — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for colours, typography, spacing and motion.
   Load this file BEFORE style.css so the tokens are available everywhere.
   --------------------------------------------------------------------------
   <link rel="stylesheet" href="css/tokens.css">
   <link rel="stylesheet" href="css/style.css">
   ========================================================================== */

:root {
  /* -- Brand colours -------------------------------------------------- */
  --ink:        #0A0908;   /* page background — deepest black */
  --coal:       #111110;   /* section alt background */
  --char:       #1A1816;   /* card background */
  --slate:      #2A2723;   /* heavier surface */

  --gold:       #C9A24A;   /* primary accent */
  --gold-warm:  #B88A35;   /* darker gold for depth */
  --gold-light: #E5C880;   /* hover / highlight gold */
  --gold-glow:  rgba(201, 162, 74, 0.35);

  --bone:       #F5EFE3;   /* primary text — warm white */
  --bone-dim:   #D9D2C4;   /* secondary text */
  --ash:        #8C857A;   /* tertiary text / labels */
  --ash-dim:    #5C564E;   /* placeholders / disabled */

  /* -- Lines & dividers ---------------------------------------------- */
  --line:       rgba(201, 162, 74, 0.18);
  --line-soft:  rgba(245, 239, 227, 0.08);

  /* -- Typography ---------------------------------------------------- */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* -- Layout -------------------------------------------------------- */
  --maxw:       1280px;
  --gutter:     clamp(1.25rem, 3vw, 2.5rem);
  --header-h:   78px;

  /* -- Radii --------------------------------------------------------- */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  18px;

  /* -- Motion -------------------------------------------------------- */
  --ease:       cubic-bezier(.2, .7, .2, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);

  /* -- Elevation ----------------------------------------------------- */
  --shadow-soft: 0 30px 80px -30px rgba(0,0,0,.6),
                 0 8px 20px -10px rgba(0,0,0,.5);
  --shadow-gold: 0 10px 40px -10px rgba(201, 162, 74, .25);
}