/* ICONIC — Color system
   Source: brand styleguide, page 5 "COLORCODES".
   Five brand colors + neutrals derived from the concrete/stone
   photography and embossed-logo aesthetic. */

:root {
  /* ---- Brand palette (from styleguide) ---- */
  --iconic-orange-soda: #FF4616;   /* primary accent — the logo colour */
  --iconic-rosewood:    #510102;   /* deep oxblood maroon */
  --iconic-powder:      #E0B6AA;   /* soft dusty pink */
  --iconic-dusty-olive: #7F713D;   /* muted khaki / brass */
  --iconic-ash-green:   #D5DBCD;   /* pale sage grey-green */

  /* ---- Tints & shades (for hover / surfaces) ---- */
  --iconic-orange-soda-hover: #E63B0E;   /* pressed / darker */
  --iconic-orange-soda-tint:  #FFE7DF;   /* wash */
  --iconic-rosewood-tint:     #F2E4E2;
  --iconic-powder-tint:       #F6EAE5;
  --iconic-olive-tint:        #EEEBDF;
  --iconic-ash-tint:          #EEF1EA;

  /* ---- Neutrals — concrete / stone greys ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFAF8;   /* off-white paper */
  --neutral-50:  #F4F3F0;   /* warm concrete light */
  --neutral-100: #E9E7E2;
  --neutral-200: #D6D3CC;
  --neutral-300: #B9B5AC;
  --neutral-400: #94908A;   /* team-bg mid grey */
  --neutral-500: #6E6B66;
  --neutral-600: #514F4B;
  --neutral-700: #3A3936;
  --neutral-800: #262524;
  --neutral-900: #171614;   /* near-black */

  /* ---- Semantic aliases ---- */
  --color-accent:            var(--iconic-orange-soda);
  --color-accent-hover:      var(--iconic-orange-soda-hover);
  --color-accent-contrast:   var(--neutral-0);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-500);
  --text-muted:     var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-accent:    var(--iconic-orange-soda);

  --surface-page:   var(--neutral-25);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-inverse:var(--neutral-900);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-900);

  --focus-ring:     var(--iconic-orange-soda);

  /* semantic status (kept muted, in-brand) */
  --color-success:  #5B6E4A;
  --color-warning:  var(--iconic-dusty-olive);
  --color-danger:   var(--iconic-rosewood);
}