/* ============================================================
   A. Henriques — Color Tokens
   ============================================================ */

:root {
  /* --- Base palette --- */
  --color-yellow:        #ffde00;
  --color-yellow-light:  #fff5a0;
  --color-yellow-dim:    #e6c800;
  --color-black:         #000000;
  --color-white:         #ffffff;

  --color-gray-50:       #f7f7f7;
  --color-gray-100:      #efefef;
  --color-gray-200:      #e0e0e0;
  --color-gray-300:      #c8c8c8;
  --color-gray-400:      #a0a0a0;
  --color-gray-500:      #787878;
  --color-gray-600:      #616161;
  --color-gray-700:      #444444;
  --color-gray-800:      #333333;
  --color-gray-900:      #1a1a1a;

  /* --- Semantic: surfaces --- */
  --surface-page:        var(--color-white);
  --surface-subtle:      var(--color-gray-50);
  --surface-raised:      var(--color-white);
  --surface-overlay:     var(--color-white);
  --surface-inverse:     var(--color-gray-900);
  --surface-accent:      var(--color-yellow);

  /* --- Semantic: text --- */
  --text-heading:        var(--color-gray-800);
  --text-body:           var(--color-gray-600);
  --text-secondary:      var(--color-gray-500);
  --text-disabled:       var(--color-gray-300);
  --text-inverse:        var(--color-white);
  --text-on-accent:      var(--color-black);
  --text-link:           var(--color-gray-800);
  --text-link-hover:     var(--color-black);

  /* --- Semantic: borders --- */
  --border-default:      var(--color-gray-200);
  --border-strong:       var(--color-gray-300);
  --border-focus:        var(--color-black);
  --border-accent:       var(--color-yellow);

  /* --- Semantic: actions (primary = black/dark) --- */
  --action-primary-bg:       var(--color-gray-900);
  --action-primary-bg-hover: var(--color-black);
  --action-primary-fg:       var(--color-white);
  --action-secondary-bg:     var(--color-white);
  --action-secondary-bg-hover: var(--color-gray-50);
  --action-secondary-fg:     var(--color-gray-800);
  --action-secondary-border: var(--color-gray-300);
  --action-ghost-bg-hover:   var(--color-gray-100);
  --action-danger-bg:        #c0392b;
  --action-danger-bg-hover:  #a93226;
  --action-danger-fg:        var(--color-white);

  /* --- Semantic: status / feedback --- */
  --status-success-bg:   #e8f5e9;
  --status-success-fg:   #2e7d32;
  --status-success-border: #a5d6a7;
  --status-warning-bg:   #fffde7;
  --status-warning-fg:   #f57f17;
  --status-warning-border: var(--color-yellow);
  --status-error-bg:     #fdecea;
  --status-error-fg:     #c62828;
  --status-error-border: #ef9a9a;
  --status-info-bg:      #e3f2fd;
  --status-info-fg:      #1565c0;
  --status-info-border:  #90caf9;
  --status-neutral-bg:   var(--color-gray-100);
  --status-neutral-fg:   var(--color-gray-700);
  --status-neutral-border: var(--color-gray-300);
}