/* ============================================================
   DP TRAINING — COLOR TOKENS
   Monochrome identity, sampled from the logotype: pure white on
   neutral black. There is no chroma in the brand — hierarchy is
   carried by value, weight and space. Semantic colors are the
   only exception and stay reserved for system states.
   ============================================================ */

:root {
  /* --- Brand scale (white -> black, the whole identity) ----- */
  --brand-50:  #FFFFFF;   /* PRIMARY — the logotype white */
  --brand-100: #F2F2F2;
  --brand-200: #E0E0E0;
  --brand-300: #C2C2C2;   /* eyebrow / quiet accent */
  --brand-400: #A3A3A3;
  --brand-500: #7A7A7A;
  --brand-600: #545454;
  --brand-700: #3A3A3A;
  --brand-800: #262626;
  --brand-900: #171717;

  /* White channel (for glows / focus rings on dark) */
  --brand-rgb: 255 255 255; /* @kind other */

  /* --- Neutrals (true neutral black -> white, no cast) ------ */
  --ink-950: #0A0A0A;    /* page background — matches the logo plate */
  --ink-900: #101010;
  --ink-850: #151515;
  --ink-800: #1B1B1B;
  --ink-700: #262626;
  --ink-600: #3A3A3A;
  --ink-500: #575757;
  --ink-400: #757575;
  --ink-300: #A1A1A1;
  --ink-200: #C7C7C7;
  --ink-150: #DEDEDE;
  --ink-100: #ECECEC;
  --ink-50:  #F6F6F6;
  --white:   #FFFFFF;

  /* --- Semantic state colors ------------------------------- */
  --success-500: #2DBE6C;
  --success-600: #1F9E58;
  --warning-500: #F5A623;
  --warning-600: #D88708;
  --danger-500:  #EF4444;
  --danger-600:  #D32F2F;

  /* ==========================================================
     SEMANTIC ALIASES — default theme is DARK (industrial).
     Components reference these, never the raw scale.
     ========================================================== */

  /* Surfaces */
  --surface-page:    var(--ink-950);
  --surface-raised:  var(--ink-900);
  --surface-card:    var(--ink-850);
  --surface-inset:   #0D0D0D;
  --surface-overlay: rgba(10, 10, 10, 0.72);

  /* Text */
  --text-primary:   var(--white);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --text-inverse:   var(--ink-950);
  --text-brand:     var(--white);

  /* Lines & borders */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.28);

  /* Brand action — a white slab on black, inverted on hover */
  --action-bg:        var(--white);
  --action-bg-hover:  var(--ink-150);
  --action-bg-press:  var(--ink-200);
  --action-fg:        var(--ink-950);
  --focus-ring:       var(--white);
}

/* ============================================================
   LIGHT THEME — bright editorial surfaces for content sections.
   Apply to a subtree: <div data-theme="light"> … </div>
   ============================================================ */
[data-theme="light"] {
  --surface-page:    var(--ink-50);
  --surface-raised:  var(--white);
  --surface-card:    var(--white);
  --surface-inset:   var(--ink-50);
  --surface-overlay: rgba(255, 255, 255, 0.78);

  --text-primary:   var(--ink-950);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-inverse:   var(--white);
  --text-brand:     var(--ink-950);

  --border-subtle:  rgba(10, 10, 10, 0.07);
  --border-default: rgba(10, 10, 10, 0.12);
  --border-strong:  rgba(10, 10, 10, 0.24);

  /* On light, the slab flips to black-on-white */
  --action-bg:        var(--ink-950);
  --action-bg-hover:  var(--ink-800);
  --action-bg-press:  var(--ink-700);
  --action-fg:        var(--white);
  --focus-ring:       var(--ink-950);

  --brand-rgb: 10 10 10; /* @kind other */
}