/* Keiko Eyewear — Color Tokens
   Official brand palette. Teal + gold is the signature contrast pairing. */

:root {
  /* ----- Brand core ----- */
  --keiko-teal:        #104248;  /* primary dark teal — headers, footers, hero, buttons */
  --keiko-gold:        #f1d457;  /* accent gold/yellow — highlights, chevrons, key words */
  --keiko-cream:       #e5d1b3;  /* beige/cream — soft alternating sections */
  --keiko-black:       #0c0c0d;
  --keiko-white:       #ffffff;

  /* ----- Teal ramp (derived for surfaces, hovers, borders) ----- */
  --teal-900: #08272b;
  --teal-800: #0b343a;
  --teal-700: #104248;  /* = brand teal */
  --teal-600: #155257;
  --teal-500: #1f6b71;
  --teal-400: #3d878d;
  --teal-300: #6fabb0;
  --teal-200: #a8cdd0;
  --teal-100: #d6e7e8;
  --teal-050: #eef5f5;

  /* ----- Gold ramp ----- */
  --gold-700: #b89a2e;
  --gold-600: #d4b73f;
  --gold-500: #f1d457;  /* = brand gold */
  --gold-400: #f4dd76;
  --gold-300: #f8e89c;
  --gold-200: #fbf1c4;
  --gold-100: #fdf8e3;

  /* ----- Cream / sand ramp ----- */
  --cream-700: #b39c79;
  --cream-600: #cbb491;
  --cream-500: #e5d1b3;  /* = brand cream */
  --cream-400: #ecdcc4;
  --cream-300: #f2e8d8;
  --cream-200: #f7f0e6;
  --cream-100: #fbf7f0;

  /* ----- Neutral / ink ramp ----- */
  --ink-900: #0c0c0d;
  --ink-800: #1d1f20;
  --ink-700: #353839;
  --ink-600: #54595b;
  --ink-500: #767c7e;
  --ink-400: #9aa0a2;
  --ink-300: #c2c7c8;
  --ink-200: #e0e3e3;
  --ink-100: #f0f2f2;
  --ink-050: #f8f9f9;

  /* ----- Semantic: surfaces ----- */
  --surface-page:        var(--keiko-white);
  --surface-alt:         var(--cream-200);   /* alternating soft section */
  --surface-cream:       var(--keiko-cream);
  --surface-card:        var(--keiko-white);
  --surface-dark:        var(--keiko-teal);  /* hero / footer / feature */
  --surface-dark-deep:   var(--teal-900);
  --surface-inverse:     var(--keiko-black);

  /* ----- Semantic: text ----- */
  --text-strong:    var(--teal-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-on-dark:   var(--keiko-white);
  --text-on-dark-muted: var(--teal-200);
  --text-on-cream:  var(--teal-900);
  --text-accent:    var(--gold-700);   /* gold readable on light bg */
  --text-link:      var(--teal-600);

  /* ----- Semantic: borders & lines ----- */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-dark:    var(--teal-600);
  --border-gold:    var(--gold-500);

  /* ----- Brand accents ----- */
  --accent:         var(--keiko-gold);
  --accent-strong:  var(--gold-600);
  --on-accent:      var(--teal-900);    /* ink on gold */
  --whatsapp:       #25d366;            /* WhatsApp CTA green */
  --whatsapp-dark:  #1da851;

  /* ----- Semantic: status ----- */
  --success: #1f8a5b;
  --warning: #c98a14;
  --danger:  #c0492f;
  --info:    var(--teal-500);

  /* ----- Focus ----- */
  --focus-ring: var(--gold-500);
}