/* ===========================================================================
   Cocoon — Color tokens
   An earthy, organic palette: warm paper neutrals, olive sage, espresso
   browns, with sky + honey + clay accents. Calm, tactile, unhurried.

   The five anchors below are lifted verbatim from the brand style guide
   (260623_Cocoon_Overview): canvas #FAF3EE · sage #767639 · espresso #2F180F ·
   sky #7491A6 · honey #F8EEAE. Everything else is derived from them.
   =========================================================================== */

:root {
  /* --- Primary palette ---------------------------------------------------- */
  --color-canvas:   #FAF3EE; /* page background — warmest paper (brand) */
  --color-paper:    #F1E7DC; /* subtle surface tint */
  --color-taupe:    #C9BBA9; /* sand / muted surface */
  --color-sage:     #767639; /* brand primary — quiet olive green (brand) */
  --color-cocoa:    #4E3221; /* deep warm brown */
  --color-espresso: #2F180F; /* darkest brown — primary text & dark surface (brand) */

  /* --- Sand / earth tint scale (neutral ramp) ----------------------------- */
  --sand-50:  #FAF3EE;
  --sand-100: #F1E7DC;
  --sand-200: #E4D6C5;
  --sand-300: #C9BBA9;
  --sand-400: #A89784;
  --sand-500: #897053;
  --sand-600: #6A523A;
  --sand-700: #533E2C;
  --sand-800: #4E3221;
  --sand-900: #2F180F;

  /* --- Sage scale --------------------------------------------------------- */
  --sage-100: #E9EAD0;
  --sage-300: #B9BB81;
  --sage-500: #767639; /* base */
  --sage-700: #5E5F2D;
  --sage-900: #3F4020;

  /* --- Accents ------------------------------------------------------------ */
  --color-sky:   #7491A6; /* cool slate wash — quiet contrast (brand) */
  --sky-soft:    #E8EDF1; /* gentle sky tint for fills / washes */
  --color-honey: #F8EEAE; /* soft butter yellow — warm highlight (brand) */
  --honey-soft:  #FCF6D2; /* lightest honey tint for fills */
  --color-clay:  #9E4434; /* terracotta — the brand's red, used sparingly */
  --color-sand-accent: #C9BBA9;

  /* --- Ink / text --------------------------------------------------------- */
  --ink-900: #2F180F; /* primary text */
  --ink-700: #4E3221; /* strong secondary text */
  --ink-500: #8A7458; /* secondary / supporting text */
  --ink-400: #A89784; /* muted / placeholder text */
  --ink-on-dark:    #FAF3EE; /* text on espresso / sage surfaces */
  --ink-on-dark-2:  rgba(250,243,238,0.66);

  /* --- Lines & borders ---------------------------------------------------- */
  --line:        #E4D6C5; /* hairline divider / default border */
  --line-strong: #DBCDBB; /* stronger border (buttons, inputs at rest) */
  --line-input:  #C9BBA9; /* input border */

  /* --- Surfaces (semantic) ------------------------------------------------ */
  --surface-page:     var(--color-canvas);
  --surface-subtle:   #F1E7DC;
  --surface-elevated: #FFFFFF; /* cards / panels */
  --surface-muted:    #C9BBA9; /* disabled / placeholder fills */
  --surface-brand:    #767639;
  --surface-dark:     #2F180F;

  /* --- Semantic / status -------------------------------------------------- */
  --success:        #767639;
  --success-strong: #166534;
  --success-dot:    #22C55E;
  --success-soft:   #DCFCE7;

  --info:           #7491A6;
  --info-soft:      #E8EDF1;

  --warning:        #B7791F;
  --warning-soft:   #FCF6D2; /* honey tint */
  --warning-page:   #FFFBEB;

  --danger:         #9E4434; /* clay — the brand's red */
  --danger-strong:  #991B1B;
  --danger-bright:  #E53E3E;
  --danger-soft:    #FEE2E2;
  --danger-page:    #FEF2F2;

  /* --- Focus ring --------------------------------------------------------- */
  --focus-ring: rgba(118,118,57,0.35);
}