/* ============================================================
   ГРУЗЧИК ГУД — Color Tokens
   Extracted from brand logo: yellow triangle + blue uniform + navy outlines
   ============================================================ */

:root {
  /* ── Brand core ── */
  --color-yellow:   #F9B72D;   /* amber triangle — primary brand */
  --color-blue:     #3A6ED4;   /* worker uniform — trust/action */
  --color-navy:     #1B2038;   /* outlines & wordmark */

  /* ── Yellow scale ── */
  --color-yellow-50:  #FFFAEB;
  --color-yellow-100: #FFF3C6;
  --color-yellow-200: #FFE27E;
  --color-yellow-300: #FFD040;
  --color-yellow-400: #F9B72D;
  --color-yellow-500: #E99D10;
  --color-yellow-600: #C07D07;
  --color-yellow-700: #9A5F06;
  --color-yellow-800: #714408;
  --color-yellow-900: #4E2F09;

  /* ── Blue scale ── */
  --color-blue-50:  #EDF3FF;
  --color-blue-100: #DBE8FF;
  --color-blue-200: #B3CCFF;
  --color-blue-300: #7BA8F8;
  --color-blue-400: #4B80EB;
  --color-blue-500: #3A6ED4;
  --color-blue-600: #2A5BBB;
  --color-blue-700: #1E4598;
  --color-blue-800: #143075;
  --color-blue-900: #0C1E55;

  /* ── Navy / Neutral scale ── */
  --color-navy-50:  #F5F6F8;
  --color-navy-100: #ECEEF2;
  --color-navy-200: #D5D8E2;
  --color-navy-300: #B0B5C8;
  --color-navy-400: #7E8499;
  --color-navy-500: #5B6177;
  --color-navy-600: #41475C;
  --color-navy-700: #2D3348;
  --color-navy-800: #1E2439;
  --color-navy-900: #1B2038;

  /* ── Semantic colors ── */
  --color-success:       #18A96A;
  --color-success-light: #E6F7F1;
  --color-success-dark:  #0F7049;

  --color-warning:       #F97316;
  --color-warning-light: #FFF0E6;
  --color-warning-dark:  #C05308;

  --color-error:         #E53935;
  --color-error-light:   #FDECEA;
  --color-error-dark:    #B71C1C;

  --color-info:          #3A6ED4;
  --color-info-light:    #EDF3FF;
  --color-info-dark:     #1E4598;

  /* ── Surface & foreground ── */
  --color-white:      #FFFFFF;
  --color-bg:         #F5F6F8;
  --color-bg-alt:     #ECEEF2;
  --color-surface:    #FFFFFF;
  --color-border:     #D5D8E2;
  --color-border-mid: #B0B5C8;

  --color-fg-1:       #1B2038;   /* primary text */
  --color-fg-2:       #41475C;   /* secondary text */
  --color-fg-3:       #7E8499;   /* tertiary / placeholder */
  --color-fg-inv:     #FFFFFF;   /* text on dark */
  --color-fg-brand:   #F9B72D;   /* brand yellow on dark backgrounds */

  /* ── Semantic aliases ── */
  --text-primary:       var(--color-fg-1);
  --text-secondary:     var(--color-fg-2);
  --text-muted:         var(--color-fg-3);
  --text-inverse:       var(--color-fg-inv);
  --text-brand:         var(--color-navy-900);   /* dark on yellow CTA */

  --surface-page:       var(--color-bg);
  --surface-card:       var(--color-surface);
  --surface-sidebar:    var(--color-navy-900);
  --surface-header:     var(--color-white);

  --accent-primary:     var(--color-yellow-400);
  --accent-secondary:   var(--color-blue-500);

  --border-default:     var(--color-border);
  --border-strong:      var(--color-border-mid);
  --border-focus:       var(--color-blue-500);
}