/* ============================================================
   COCOTOMO FARM — Color tokens
   Palette taken from the mosaic-circle logo: a warm, earthy,
   multi-coloured set where "many individual pieces form one
   circle". Off-white base, dark-brown ink, never pure black.
   ============================================================ */
:root {
  /* ---- Brand core scales ---------------------------------- */

  /* Tomato red — primary accent (the brand's signature) */
  --color-tomato-100: #FBE7E4;
  --color-tomato-300: #EE9A91;
  --color-tomato-500: #E15C4E;
  --color-tomato-600: #D63E2F; /* base */
  --color-tomato-700: #B5301F;
  --color-tomato-800: #8F2417;

  /* Amber orange — secondary accent / warmth */
  --color-amber-100: #FCF1DD;
  --color-amber-300: #F3C77F;
  --color-amber-500: #EFAE4D;
  --color-amber-600: #E89A2C; /* base */
  --color-amber-700: #C77F18;
  --color-amber-800: #9C6310;

  /* Lime / olive green — fields, freshness */
  --color-lime-100: #EDF4E1;
  --color-lime-300: #B9D78C;
  --color-lime-500: #95C45E;
  --color-lime-600: #7CB342; /* base */
  --color-lime-700: #5E9130;
  --color-lime-800: #466C24;

  /* Emerald — calm, growth, success */
  --color-emerald-100: #DFF2EC;
  --color-emerald-300: #8CCFBB;
  --color-emerald-500: #4DB89A;
  --color-emerald-600: #2A9D7F; /* base */
  --color-emerald-700: #1F7A62;
  --color-emerald-800: #165C49;

  /* Deep teal — depth, trust, headers */
  --color-teal-100: #DCE7EB;
  --color-teal-300: #7FA3B0;
  --color-teal-500: #2E6B80;
  --color-teal-600: #154A5C; /* base */
  --color-teal-700: #103744;
  --color-teal-800: #0B2730;

  /* Earth brown / terracotta — soil, craft, grounding */
  --color-brown-100: #F0E7DE;
  --color-brown-300: #C7A98F;
  --color-brown-500: #A0734F;
  --color-brown-600: #8A5A3C; /* base */
  --color-brown-700: #6E462D;
  --color-brown-800: #543320;

  /* ---- Neutrals (warm, brown-tinted — never pure grey) ---- */
  --color-ink-900: #33271E;  /* main text / dark brown */
  --color-ink-700: #5C4E42;  /* secondary text */
  --color-ink-500: #8A7D70;  /* muted / captions */
  --color-ink-300: #B6AB9C;  /* disabled text, hints */

  --color-cream-50:  #FFFDFA; /* raised card surface */
  --color-cream-100: #FAF7F2; /* page background (base) */
  --color-cream-200: #F3EDE3; /* sunken / alt surface */
  --color-cream-300: #EAE0D2; /* hairline borders */
  --color-cream-400: #DDD0BD; /* stronger borders */

  --color-white: #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Brand */
  --brand-primary:        var(--color-tomato-600);
  --brand-primary-hover:  var(--color-tomato-700);
  --brand-primary-press:  var(--color-tomato-800);
  --brand-secondary:      var(--color-amber-600);
  --brand-secondary-hover:var(--color-amber-700);
  --brand-tertiary:       var(--color-teal-600);

  /* Surfaces */
  --surface-page:    var(--color-white);
  --surface-card:    var(--color-cream-50);
  --surface-sunken:  var(--color-cream-200);
  --surface-inverse: var(--color-teal-600);
  --surface-accent-soft: var(--color-amber-100);

  /* Text */
  --text-heading:  var(--color-ink-900);
  --text-body:     var(--color-ink-700);
  --text-muted:    var(--color-ink-500);
  --text-on-brand: var(--color-cream-50);
  --text-on-dark:  var(--color-cream-100);
  --text-link:     var(--color-tomato-700);

  /* Borders */
  --border-hairline: var(--color-cream-300);
  --border-strong:   var(--color-cream-400);
  --border-focus:    var(--color-tomato-600);

  /* Status */
  --status-success: var(--color-emerald-600);
  --status-success-soft: var(--color-emerald-100);
  --status-warning: var(--color-amber-600);
  --status-warning-soft: var(--color-amber-100);
  --status-error:   var(--color-tomato-600);
  --status-error-soft: var(--color-tomato-100);
  --status-info:    var(--color-teal-600);
  --status-info-soft: var(--color-teal-100);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-tomato-600) 38%, transparent);
}