/* ============================================================
   CHOPLIN AVOCAT — Colors & Type
   Foundations for Me Caroline Choplin, avocate en droit immobilier
   186 rue de Rivoli, 75001 Paris
   ============================================================ */

/* Fraunces est chargée par un <link> dans le <head> de chaque page
   (un @import ici bloquerait le rendu en chaînant deux requêtes). */

:root {
  /* ----------------------------------------------------------
     COLOR — primary palette
     Source of truth: brand file CC-Brand
     ---------------------------------------------------------- */

  /* Signature green — used on logo, headlines, primary surfaces */
  --cc-green-900: #062F2C;       /* deepest, for text on light bg */
  --cc-green-800: #0A4541;       /* PRIMARY brand green (logo color) */
  --cc-green-700: #14605B;
  --cc-green-600: #2E7C76;
  --cc-green-500: #4F9893;
  --cc-green-300: #A8C9C5;
  --cc-green-100: #DCEAE7;
  --cc-green-50:  #EEF4F2;

  /* Signature blush — counter-color, warmth, féminité subtile */
  --cc-blush-700: #B85A4E;
  --cc-blush-600: #D88478;
  --cc-blush-500: #E8AFA4;
  --cc-blush-300: #F5D2C9;
  --cc-blush-200: #FBE0D8;
  --cc-blush-100: #FFEDEA;       /* PRIMARY brand blush (logo bg) */
  --cc-blush-50:  #FFF6F3;

  /* Neutrals — warm ivories, never pure white */
  --cc-cream:     #FAF6F1;       /* page background, warm */
  --cc-ivory:     #FFFCF8;
  --cc-paper:     #FFFFFF;       /* cards on cream */
  --cc-stone-100: #ECE6DD;
  --cc-stone-200: #D9D0C2;
  --cc-stone-400: #998E7D;
  --cc-stone-600: #5C5345;
  --cc-stone-800: #2A2520;
  --cc-ink:       #1A1714;       /* body text on cream */

  /* Semantic */
  --cc-success:   #4F9893;       /* tied to brand green */
  --cc-warning:   #D88478;       /* tied to blush */
  --cc-danger:    #B83A2C;
  --cc-info:      #4F9893;

  /* ----------------------------------------------------------
     SEMANTIC — surfaces
     ---------------------------------------------------------- */
  --bg:           var(--cc-cream);
  --bg-elevated:  var(--cc-paper);
  --bg-accent:    var(--cc-blush-100);
  --bg-inverse:   var(--cc-green-800);

  --fg:           var(--cc-ink);
  --fg-muted:     var(--cc-stone-600);
  --fg-subtle:    var(--cc-stone-400);
  --fg-on-green:  var(--cc-blush-100);
  --fg-on-blush:  var(--cc-green-800);

  --border:       var(--cc-stone-200);
  --border-soft:  var(--cc-stone-100);
  --border-focus: var(--cc-green-700);

  --accent:       var(--cc-green-800);
  --accent-hover: var(--cc-green-700);
  --accent-press: var(--cc-green-900);

  /* ----------------------------------------------------------
     TYPE
     ---------------------------------------------------------- */
  --font-display: "Fraunces", "Cormorant Garamond", "Apple Garamond", Garamond, "Times New Roman", serif;
  --font-body:    "Fraunces", "Cormorant Garamond", "Apple Garamond", Garamond, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Tracking */
  --tracking-display: -0.01em;
  --tracking-body:    -0.005em;
  --tracking-eyebrow:  0.18em;   /* generous, like the AVOCAT lockup */
  --tracking-button:   0.04em;

  /* Weights */
  --w-display: 400;
  --w-body:    400;
  --w-medium:  500;
  --w-semi:    600;

  /* Type scale — desktop, fluid */
  --fs-eyebrow: 0.8125rem;
  --fs-tiny:    0.875rem;
  --fs-small:   1rem;
  --fs-body:    1.125rem;        /* 18px, generous reading */
  --fs-lead:    1.375rem;
  --fs-h6:      1.25rem;
  --fs-h5:      1.5rem;
  --fs-h4:      2rem;
  --fs-h3:      2.5rem;
  --fs-h2:      3.25rem;
  --fs-h1:      clamp(3rem, 5.5vw + 1.1rem, 5.5rem);
  --fs-display: clamp(3.75rem, 8vw + 1.1rem, 8rem);

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* ----------------------------------------------------------
     SPACING — 4px base, soft rhythm
     ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ----------------------------------------------------------
     RADII — soft, never sharp; never overly rounded
     ---------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — subtle, warm-tinted (not blue-black)
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(26, 23, 20, 0.04), 0 1px 1px rgba(26, 23, 20, 0.02);
  --shadow-2: 0 4px 12px -2px rgba(26, 23, 20, 0.06), 0 2px 4px -1px rgba(26, 23, 20, 0.04);
  --shadow-3: 0 12px 32px -8px rgba(26, 23, 20, 0.10), 0 4px 8px -2px rgba(26, 23, 20, 0.05);
  --shadow-4: 0 24px 60px -16px rgba(10, 69, 65, 0.18), 0 8px 16px -4px rgba(26, 23, 20, 0.06);

  /* ----------------------------------------------------------
     MOTION — quiet, never bouncy
     ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;

  /* Layout */
  --container:   1240px;
  --container-narrow: 880px;
  --gutter:      max(24px, 4vw);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via `.cc-prose` to opt in, or import a global reset.
   ============================================================ */

.cc-display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}

.cc-h1, h1.cc {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}

.cc-h2, h2.cc {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}

.cc-h3, h3.cc {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.cc-h4, h4.cc {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.cc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.cc-lead {
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}

.cc-body, p.cc {
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

.cc-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.cc-tiny {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}