/* ============================================================
   Nolab — Color tokens  (per Brand Guidelines v1.0, §04 + §8.4)
   ------------------------------------------------------------
   CORE PALETTE
     Porcelain Light  #F5F4F1   neutral base   — 80%
     Charcoal         #12171B   dark sections  — 10%
     Graphite         #373C3F   text           — 7%
     Nolab Blue       #3A2FF2   accent         — 3%  (use with intention)

   The accent is precious: Nolab Blue is reserved EXCLUSIVELY as a functional
   accent — active states, secondary navigation, microinteractions, emphasis
   indicators, links, focus, and the Dot. NEVER for section backgrounds,
   button fills, large surfaces, or general fills. Primary CTAs are Charcoal —
   sophistication over saturation.
   ============================================================ */

:root {
  /* ---- Core named brand colors ---- */
  --porcelain: #f5f4f1;
  --graphite:  #373c3f;
  --charcoal:  #12171b;
  --nolab-blue: #3a2ff2;

  /* ---- Neutral scale (cool, §8.4) ---- */
  --neutral-0:   #ffffff;
  --neutral-100: #f5f4f1;   /* Porcelain Light */
  --neutral-200: #eeece8;   /* warm paper / cream */
  --neutral-300: #d2cfc8;
  --neutral-400: #6e7578;
  --neutral-500: #373c3f;   /* Graphite */
  --neutral-600: #2a2f33;
  --neutral-700: #12171b;   /* Charcoal */
  --neutral-900: #0e1216;   /* Neutral 900 — deepest ink */

  /* hairline tints between 100–300 for fine UI lines */
  --neutral-150: #ecebe6;
  --neutral-250: #e0ded7;

  /* ---- Nolab Blue scale (§8.4) ---- */
  --blue-100: #5f55ff;
  --blue-500: #3a2ff2;
  --blue-700: #2c22c9;
  --blue-tint: #ecebfe;     /* faint wash for soft accent surfaces */

  /* ---- Vertical colors (§4.2 / §8.4) ---- */
  --terracotta-100: #b18471;   /* NOLAB Fractional */
  --terracotta-500: #9e654e;
  --terracotta-700: #855240;
  --forest-100: #4c675c;       /* NOLAB Rentas */
  --forest-500: #2f4a3e;
  --forest-700: #243a30;

  /* ---- Semantic status (functional, harmonized to palette) ---- */
  --success-600: #2f7d5b;
  --success-100: #dcefe5;
  --warning-600: #B68C14;   /* amber */
  --warning-100: #FCEEC7;
  --danger-600:  #b23b2c;
  --danger-100:  #f4ddd8;
  --info-600:    var(--blue-500);
  --info-100:    var(--blue-tint);

  /* ---- Data-viz sentiment (muted, editorial) ----
     Toned status hues so charts read editorial, not alert/SaaS.
     Recipe: status-600 80% + Graphite 20%. */
  --dataviz-positive: #317055;   /* success-600 + graphite */
  --dataviz-negative: #993b30;   /* danger-600 + graphite */

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */

  /* Surfaces */
  --surface-page:        var(--porcelain);
  --surface-card:        var(--neutral-0);
  --surface-raised:      var(--neutral-0);
  --surface-sunken:      var(--neutral-150);
  --surface-paper:       var(--neutral-200);   /* warm editorial sections */
  --surface-inverse:     var(--charcoal);      /* dark sections / footer */
  --surface-inverse-deep: var(--neutral-900);
  /* NOTE: Nolab Blue is an accent, never a surface. Do not fill sections,
     bands, or large areas with blue — use Charcoal (--surface-inverse).
     These remain only for tiny emphasis surfaces (e.g. an info callout). */
  --surface-accent:      var(--blue-500);
  --surface-accent-soft: var(--blue-tint);

  /* Photo overlay — Graphite (rgb 27,33,39 = #1B2127) 0%→78% in the lower
     third, for text legibility. NOTE: uses Graphite, not Charcoal (#12171B). */
  --photo-overlay: linear-gradient(
    to top,
    rgba(27, 33, 39, 0.78) 0%,
    rgba(27, 33, 39, 0.32) 28%,
    rgba(27, 33, 39, 0) 55%
  ); /* @kind color */
  --photo-overlay-40: rgba(27, 33, 39, 0.40);

  /* Text */
  --text-strong:    var(--neutral-900);   /* headlines */
  --text-body:      var(--graphite);      /* body copy */
  --text-muted:     var(--neutral-400);
  --text-subtle:    var(--neutral-400);
  --text-inverse:   var(--porcelain);
  --text-on-accent: #ffffff;
  --text-on-dark:   var(--porcelain);
  --text-accent:    var(--blue-500);
  --text-link:      var(--blue-500);

  /* Actions — primary CTA is Charcoal; blue is accent only */
  --action-primary:        var(--charcoal);
  --action-primary-hover:  var(--neutral-900);
  --action-on-primary:     var(--porcelain);
  --action-accent:         var(--blue-500);
  --action-accent-hover:   var(--blue-700);
  --action-disabled:       #C6C6C6;   /* disabled button fill (flat grey) */
  --action-on-disabled:    var(--neutral-400);

  /* Borders / lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--charcoal);
  --border-accent:  var(--blue-500);

  /* Interaction */
  --focus-ring: var(--blue-500);
}