/* ═══════════════════════════════════════════════════════════════════
   ARTCLIC – DESIGN · TOKENS
   ───────────────────────────────────────────────────────────────────
   The single source of truth for Artclic Studios brand identity.
   Drop this file into any project and import it before anything else.

   Charter:  charter-v1.1.0.html (canonical reference)
   Version:  v1.1.0
   Updated:  May 2026
   Maintainer: Manmout · Artclic Studios · Bruxelles
   ═══════════════════════════════════════════════════════════════════ */

/* Polices : fonts.css (auto-hébergé, tools/fetch_fonts.py), lié dans le <head> en parallèle. */

:root {

  /* ─────────────────────────────────────────────────────────────────
     01 · PALETTE
     ───────────────────────────────────────────────────────────────── */

  /* Surfaces — never #fff */
  --ad-cream:        #f5efe2;  /* Primary surface (page background) */
  --ad-cream-soft:   #ede5d2;  /* Alternating surface (stacked sections) */
  --ad-paper:        #faf6ec;  /* High surface (cards, callouts) */

  /* Signature — Ashanti Gold (UNIQUE brand color) */
  --ad-gold:         #c9892b;  /* Primary signature */
  --ad-gold-deep:    #a06d1f;  /* Hover, active states */
  --ad-gold-glow:    rgba(201, 137, 43, 0.12);  /* Soft backgrounds */

  /* Neutrals — never #000 */
  --ad-ink:          #1a1814;  /* Primary text */
  --ad-ink-soft:     #4a4540;  /* Secondary text */
  --ad-ink-mute:     #7a7367;  /* Metadata, captions */
  --ad-line:         #d4cab5;  /* Subtle lines */
  --ad-line-strong:  #8a8170;  /* Active borders */

  /* ─────────────────────────────────────────────────────────────────
     02 · TYPOGRAPHY
     ───────────────────────────────────────────────────────────────── */

  --ad-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --ad-ui:      'Inter Tight', system-ui, -apple-system, sans-serif;
  --ad-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Scale — D-1 to M-1 */
  --ad-text-hero:    clamp(3.5rem, 9vw, 7rem);     /* D-1 — Covers */
  --ad-text-display: clamp(2.2rem, 5vw, 3.8rem);   /* D-2 — Section titles */
  --ad-text-h1:      clamp(1.6rem, 3vw, 2.2rem);   /* H-1 — Sub-headlines */
  --ad-text-h2:      clamp(1.15rem, 2vw, 1.4rem);  /* H-2 — Card titles */
  --ad-text-body:    1rem;                         /* B-1 — Body */
  --ad-text-meta:    0.75rem;                      /* B-2 — Captions */
  --ad-text-micro:   0.68rem;                      /* M-1 — Tags, code */

  /* ─────────────────────────────────────────────────────────────────
     03 · SPACING (8px rhythm)
     ───────────────────────────────────────────────────────────────── */

  --ad-s-1:  4px;
  --ad-s-2:  8px;
  --ad-s-3:  12px;
  --ad-s-4:  16px;
  --ad-s-5:  24px;
  --ad-s-6:  32px;
  --ad-s-8:  48px;
  --ad-s-10: 64px;

  /* ─────────────────────────────────────────────────────────────────
     04 · LAYOUT
     ───────────────────────────────────────────────────────────────── */

  --ad-page-max:  1280px;
  --ad-page-pad:  clamp(1.5rem, 4vw, 4rem);
  --ad-gutter:    1.5rem;

  /* Breakpoints (consume in JS or via @media) */
  --ad-bp-mobile:  640px;
  --ad-bp-tablet:  1024px;
  --ad-bp-desktop: 1280px;

  /* ─────────────────────────────────────────────────────────────────
     05 · MOTION
     ───────────────────────────────────────────────────────────────── */

  /* Durations */
  --ad-m-fast:    120ms;   /* Hover, focus */
  --ad-m-base:    240ms;   /* Standard transitions */
  --ad-m-slow:    480ms;   /* Page entries */
  --ad-m-stagger: 100ms;   /* Cascade delay between items */

  /* Easing curves */
  --ad-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ad-ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ad-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ad-ease-signature: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Subtle spring */
}

/* ───────────────────────────────────────────────────────────────────
   USAGE
   ───────────────────────────────────────────────────────────────────

   In HTML <head>:
   <link rel="stylesheet" href="tokens.css">

   Or as import in your main CSS:
   @import 'tokens.css';

   Or as CDN-style inline if hosted:
   <link rel="stylesheet" href="https://artclic.studio/tokens.css">

   ─────────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────────
   EXTENSION shop.artclic.studio (décision humaine du 13/10/2026)
   Accent des mots en italique : violet de la landing artclic.studio
   (#c084fc) assombri pour le fond crème — contraste 6,09:1.
   Écart assumé à la charte : l'or reste sur le bouton d'achat.
   ─────────────────────────────────────────────────────────────────── */
:root {
  --ad-violet: #7e22ce;
}