/* ==========================================================================
   Ananta Designs - design tokens

   Ported verbatim from the client-approved prototype
   (ananta-designs-showcase → src/styles/tokens.css, [data-concept="final"] - "Direction 05, Ananta Signature": Direction 01's palette and display serif
   carried on Direction 04's structural metrics).

   The prototype declared its tokens under a [data-concept] wrapper because it
   had to hold five directions at once. Production has one, so the same values
   live on :root and the wrapper is gone.

   THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR THE PALETTE.
   theme.json mirrors it for the block editor; nothing else re-declares a
   colour. If a value changes, it changes here.
   ========================================================================== */

:root {
  /* ---- surfaces --------------------------------------------------------- */
  --ink: #08080a;
  --surface: #0d0d10;
  --surface-2: #131318;
  --paper: #f4efe6;
  --paper-2: #e9e1d3;

  /* ---- hairlines -------------------------------------------------------- */
  --line: #1f1e25;
  --line-strong: #302e38;

  /* ---- type ------------------------------------------------------------- */
  --fg: #ede8e0;
  --fg-dim: #b5afa5;
  --muted: #85817a;

  /* ---- accent - a warm antique gold, never a bright yellow -------------- */
  --gold: #c3a16a;
  --gold-soft: #e6d3ac;
  --gold-deep: #7d6132;

  /* The ink-on-gold text colour that keeps the gold strip readable. */
  --on-gold: #171004;

  /* Banded rather than a smooth two-stop wash - real gold leaf is uneven,
     and a flat yellow fill is the fastest way to look cheap. */
  --gold-leaf: linear-gradient(
    100deg,
    #8a6a32 0%,
    #c3a16a 16%,
    #ecd9ae 32%,
    #b8934f 48%,
    #dcc79a 62%,
    #c3a16a 78%,
    #86642e 100%
  );

  /* ---- typography ------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  /* ---- geometry ---------------------------------------------------------
     Square corners are the point of this direction: radius is what makes a
     page read as an app rather than a house. Declared as a token rather than
     hardcoded so it stays deliberate - and so WooCommerce's own stylesheets
     can be pointed at it. */
  --radius: 0px;
  --radius-lg: 0px;

  /* ---- measure and rhythm ----------------------------------------------- */
  --shell: 1320px;
  --shell-wide: 1600px;
  --gutter: 20px;

  /* ---- chrome heights ---------------------------------------------------
     --head-h is the TOTAL fixed-header height (nav row + category pill rail).
     Pages offset their first section by --head-h, never by --nav-h. */
  --nav-h: 62px;
  --rail-h: 45px;
  --head-h: calc(var(--nav-h) + var(--rail-h));
  --tabbar-h: 62px;

  /* ---- easing ----------------------------------------------------------- */
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---- studio / product plates ------------------------------------------
     The backdrop a photograph or a placeholder frame sits on. Declared here
     so a mode switch repaints every plate in pure CSS. */
  --plate-dark: radial-gradient(
    125% 95% at 50% 20%,
    #26221c 0%,
    #131316 42%,
    #08080a 100%
  );
  --plate-deep: radial-gradient(
    115% 85% at 50% 16%,
    #18171b 0%,
    #0a0a0c 48%,
    #050506 100%
  );

  --plate-vig-dark: radial-gradient(
    100% 78% at 50% 42%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.62) 100%
  );

  /* film grain strength - heavier on black, barely there on white */
  --grain-opacity: 0.32;

  /* ---- z-index scale ----------------------------------------------------
     Named so a future section never has to guess whether 50 is above or
     below the header. */
  --z-sticky: 40;
  --z-buybar: 50;
  --z-header: 60;
  --z-sheet: 70;
  --z-skip: 100;
}

/* ==========================================================================
   LIGHT MODE

   Retained from the approved prototype but NOT wired to a toggle in the
   production theme - the launch decision is dark-only (see docs/DESIGN.md).
   Keeping the palette here costs nothing and means switching it on later is
   a matter of restoring the toggle, not re-deriving thirteen colours.

   Note the gold is darkened: the dark-mode gold (#c3a16a) reads at roughly
   2:1 on white, which is unusable. #7f6128 clears 4.5:1 against its ground.
   ========================================================================== */

[data-mode="light"] {
  --ink: #f7f4ef;
  --surface: #ffffff;
  --surface-2: #f0ece3;
  --line: #e3ddd1;
  --line-strong: #cbc3b3;
  --fg: #15140f;
  --fg-dim: #4b463c;
  --muted: #6b6456;
  --gold: #7f6128;
  --gold-soft: #644c1d;
  --gold-deep: #c3a16a;
  --grain-opacity: 0.14;

  --plate-dark: radial-gradient(
    125% 95% at 50% 20%,
    #ffffff 0%,
    #f3efe7 44%,
    #e2dbcd 100%
  );
  --plate-deep: radial-gradient(
    115% 85% at 50% 16%,
    #fbf9f5 0%,
    #efeae0 48%,
    #ddd5c5 100%
  );
  --plate-vig-dark: radial-gradient(
    100% 80% at 50% 42%,
    rgba(0, 0, 0, 0) 44%,
    rgba(120, 101, 68, 0.2) 100%
  );
}