/* ===========================================================
   OREEGAMI — Design Tokens
   =========================================================== */

/* ---------- Inter font family (local) ---------- */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Thin.ttf') format('truetype');        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-ExtraLight.ttf') format('truetype');  font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Light.ttf') format('truetype');       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype');     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.ttf') format('truetype');      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf') format('truetype');    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf') format('truetype');        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-ExtraBold.ttf') format('truetype');   font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Black.ttf') format('truetype');       font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- Primary brand ---------- */
  --oreegami-bleu: #0000E6;
  --oreegami-rouge: #FF4C53;

  /* ---------- Secondary palette ---------- */
  --oreegami-violet:  #7500CE;
  --oreegami-vert:    #019054;
  --oreegami-jaune:   #FFE04A;
  --oreegami-rose:    #FF3E8C;
  --oreegami-bleu-2:  #00D0FD;
  --oreegami-violet-2:#4B0076;
  --oreegami-vert-2:  #58DD00;

  /* ---------- Neutrals ---------- */
  --ink:        #0A0A1E;   /* near-black, warmed toward bleu */
  --ink-70:     #3D3D55;
  --ink-50:     #6B6B80;
  --ink-30:     #B5B5C2;
  --ink-10:     #E6E6ED;
  --paper:      #FFFFFF;
  --paper-cream:#FAF8F2;   /* warm off-white — feels like paper */
  --paper-mist: #F3F3FA;   /* cool bleu-tinted off-white */

  /* ---------- Semantic ---------- */
  --c-bg:       var(--paper);
  --c-surface:  var(--paper-mist);
  --c-text:     var(--ink);
  --c-text-muted: var(--ink-50);
  --c-accent:   var(--oreegami-bleu);
  --c-accent-2: var(--oreegami-rouge);
  --c-border:   var(--ink-10);

  /* ---------- Type ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale — 1920 design, scales down gracefully */
  --fs-display: clamp(3.5rem, 6vw, 6rem);       /* 56–96 */
  --fs-h1:      clamp(2.5rem, 4.2vw, 4rem);     /* 40–64 */
  --fs-h2:      clamp(1.75rem, 2.6vw, 2.5rem);  /* 28–40 */
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.5rem);  /* 20–24 */
  --fs-lead:    clamp(1.125rem, 1.3vw, 1.25rem);/* 18–20 */
  --fs-body:    1rem;                            /* 16 */
  --fs-small:   0.875rem;                        /* 14 */
  --fs-micro:   0.75rem;                         /* 12, UPPERCASE eyebrows only */

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.5;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii (origami = soft folds, not pillows) ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(10,10,30,.06), 0 1px 1px rgba(10,10,30,.04);
  --shadow-2: 0 8px 24px rgba(10,10,30,.08), 0 2px 6px rgba(10,10,30,.05);
  --shadow-3: 0 24px 64px rgba(10,10,30,.14), 0 4px 12px rgba(10,10,30,.06);
  --shadow-brand: 0 16px 48px rgba(0,0,230,.22);

  /* ---------- Motion ---------- */
  --ease-fold:  cubic-bezier(.2, .8, .2, 1);
  --ease-crisp: cubic-bezier(.7, 0, .3, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}

/* ---------- Base reset / page ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }