/* Au Coin du Feu — jetons de design + styles de base.
   Concaténation des fichiers du design system : un seul fichier, une seule requête.
   Ne pas modifier à la main : régénérer depuis le design system. */

/* ===== tokens/colors.css ===== */
/* ============================================================
   Au Coin du Feu — Color tokens
   Sampled directly from the flame logo gradient (red → amber → gold)
   ============================================================ */

:root {
  /* ---- Brand flame ramp (the fire) ---- */
  --flame-gold:    #FBBA00;   /* brightest highlight, top of flame */
  --flame-amber:   #F59120;   /* mid amber */
  --flame-orange:  #EE6C2B;   /* orange body */
  --flame-ember:   #DC4B2C;   /* ember orange-red */
  --flame-red:     #C4302A;   /* deep red edge, base of flame */

  /* tints & shades of the primary (amber) for states */
  --flame-amber-600: #D9760F; /* hover / pressed */
  --flame-amber-100: #FDEBD0; /* soft fill */
  --flame-amber-050: #FEF6EA; /* faint surface wash */
  --flame-red-700:   #A6241F; /* deep pressed red */

  /* ---- Warm neutrals (hearth ash & charcoal) ---- */
  --ink-950: #14100D;  /* warm near-black, primary text on light */
  --ink-900: #1E1813;  /* charcoal, dark surfaces */
  --ink-800: #2C241D;
  --ink-700: #423730;
  --ink-600: #5C4E44;
  --ink-500: #7A6B60;  /* muted text */
  --ink-400: #9C8E82;
  --ink-300: #C4B8AD;  /* borders on warm bg */
  --ink-200: #E4DBD1;  /* hairline / divider */
  --ink-100: #F1EAE1;  /* subtle surface */
  --ink-050: #FAF6F0;  /* page background, warm paper */
  --white:   #FFFFFF;

  /* ---- Semantic status ---- */
  --success:  #3F8A5B;
  --success-bg: #E7F2EC;
  --warning:  #E0A62E;
  --warning-bg: #FBF1DA;
  --danger:   #C4302A;   /* reuses ember red */
  --danger-bg: #FBE7E4;
  --info:     #3C6E8F;
  --info-bg:  #E5EEF3;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --color-primary:        var(--flame-amber);
  --color-primary-hover:   var(--flame-amber-600);
  --color-primary-contrast: var(--white);
  --color-accent:         var(--flame-red);

  --text-strong:  var(--ink-950);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-inverse: var(--ink-050);
  --text-on-flame: var(--white);

  --surface-page:   var(--ink-050);
  --surface-card:   var(--white);
  --surface-sunken: var(--ink-100);
  --surface-dark:   var(--ink-900);
  --surface-flame-wash: var(--flame-amber-050);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--flame-amber);

  --link:       var(--flame-ember);
  --link-hover: var(--flame-red-700);

  /* ---- Signature gradients ---- */
  --gradient-flame: linear-gradient(158deg, var(--flame-gold) 0%, var(--flame-amber) 32%, var(--flame-orange) 62%, var(--flame-red) 100%);
  --gradient-flame-h: linear-gradient(90deg, var(--flame-red) 0%, var(--flame-orange) 45%, var(--flame-gold) 100%);
  --gradient-ember-hairline: linear-gradient(90deg, var(--flame-gold), var(--flame-orange) 55%, var(--flame-red));
  --gradient-hearth-dark: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Au Coin du Feu — Typography tokens
   Display: warm transitional serif (echoes the classic wordmark)
   UI/Body: humanist sans (echoes the rounded "af solutions" mark)
   ============================================================ */

/* Google Fonts — substitutes for the brand's un-shipped fonts.
   See readme.md "Font substitution" note. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..600&family=Mulish:ital,wght@0,300..900;1,400..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Families ---- */
  --font-serif: 'Lora', 'Georgia', 'Times New Roman', serif;         /* display / brand voice */
  --font-sans:  'Mulish', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* UI & body */
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (1.250 major-third, base 16px) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.25rem;   /* 84 — hero display */

  /* ---- Weights ---- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-snug:   -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide:   0.04em; /* @kind font */
  --ls-caps:   0.14em; /* @kind font */

  /* ---- Semantic roles ---- */
  --font-display: var(--font-serif);
  --font-heading: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
  --font-eyebrow: var(--font-sans);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Au Coin du Feu — Spacing, radii, sizing tokens
   4px base grid
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-12: 7.5rem;    /* 120 */

  /* ---- Radii — soft, warm, never sharp ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: var(--space-5);

  /* ---- Control sizing ---- */
  --control-h-sm: 36px;
  --control-h-md: 44px;   /* default; meets 44px hit target */
  --control-h-lg: 54px;

  /* ---- Focus ring ---- */
  --ring-width: 3px;
  --ring-color: color-mix(in srgb, var(--flame-amber) 45%, transparent);
}

/* ===== tokens/effects.css ===== */
/* ============================================================
   Au Coin du Feu — Elevation, shadows, motion
   Shadows are warm-tinted (never pure grey/black) to keep the
   hearth glow. Motion is calm and confident — no bounce.
   ============================================================ */

:root {
  /* ---- Shadows: warm-brown ambient, layered ---- */
  --shadow-xs:  0 1px 2px rgba(46, 30, 18, 0.06);
  --shadow-sm:  0 2px 6px rgba(46, 30, 18, 0.08);
  --shadow-md:  0 6px 18px rgba(46, 30, 18, 0.10);
  --shadow-lg:  0 16px 40px rgba(46, 30, 18, 0.14);
  --shadow-xl:  0 28px 70px rgba(46, 30, 18, 0.18);

  /* ---- Flame glow — for primary CTAs & feature accents ---- */
  --glow-flame: 0 8px 24px rgba(238, 108, 43, 0.35);
  --glow-flame-strong: 0 10px 34px rgba(220, 75, 44, 0.45);

  /* ---- Inner shadow (inputs, wells) ---- */
  --shadow-inset: inset 0 1px 2px rgba(46, 30, 18, 0.08);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */

  /* ---- Overlay / scrim ---- */
  --scrim: rgba(20, 16, 13, 0.55);
  --blur-panel: saturate(1.1) blur(14px); /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Au Coin du Feu — Base element styles & helpers
   Light-touch resets + brand defaults for raw HTML.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — serif brand voice */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--link-hover); }

/* Eyebrow / overline helper */
.acdf-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--flame-ember);
}

/* Flame-gradient text (use sparingly, for hero accents) */
.acdf-flame-text {
  background: var(--gradient-flame-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Ember hairline divider */
.acdf-hairline {
  height: 3px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-ember-hairline);
}

::selection { background: var(--flame-amber-100); color: var(--ink-950); }