/* ==================================================================
   COLORS — Andy Hutchinson Design System
   Editorial photography-portfolio palette: warm gallery paper,
   deep warm ink, a single sunrise "Ember" accent, and a supporting
   cool "Tide" for links / info. Built for both light layouts and
   dark video overlays (lower-thirds, end screens).
   ================================================================== */
:root {
  /* --- Warm neutral scale (Stone) --- */
  --stone-50:  #faf8f4;   /* gallery paper */
  --stone-100: #f2eee7;
  --stone-200: #e6e0d6;
  --stone-300: #d3cabb;
  --stone-400: #b3a795;
  --stone-500: #8c8171;
  --stone-600: #6a6153;
  --stone-700: #4b453a;
  --stone-800: #2c2822;
  --stone-900: #1a1712;   /* warm charcoal */
  --stone-950: #111009;   /* near-black ink */

  /* --- Ember (sunrise / coastal warm accent) --- */
  --ember-50:  #fbf0e9;
  --ember-100: #f6dccc;
  --ember-200: #eab392;
  --ember-300: #de8a5a;
  --ember-400: #cf6b34;
  --ember-500: #c05a2e;   /* primary accent */
  --ember-600: #a4481f;
  --ember-700: #833819;

  /* --- Tide (cool ocean, supporting accent / links) --- */
  --tide-100: #dceae8;
  --tide-300: #7fa8a2;
  --tide-500: #2f6660;
  --tide-600: #245d57;
  --tide-700: #1b4741;

  /* --- Pure --- */
  --white: #ffffff;
  --black: #000000;

  /* --- Feedback (used sparingly, tuned to warm palette) --- */
  --success: #4f7a3f;
  --warning: #c98a1e;
  --danger:  #b23b2e;

  /* ================================================================
     SEMANTIC ALIASES — reach for these in real work
     ================================================================ */

  /* Surfaces */
  --surface-page:     var(--stone-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--stone-100);
  --surface-ink:      var(--stone-950);   /* dark video-overlay base */
  --surface-ink-soft: var(--stone-900);

  /* Text on light */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-700);
  --text-muted:     var(--stone-500);
  --text-caption:   var(--stone-600);

  /* Text on ink / imagery */
  --on-ink-primary:   var(--stone-50);
  --on-ink-secondary: rgba(250, 248, 244, 0.72);
  --on-ink-muted:     rgba(250, 248, 244, 0.52);

  /* Accent */
  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-press:  var(--ember-700);
  --accent-soft:   var(--ember-50);
  --on-accent:     var(--white);

  /* Link (cool tide reads as calm/editorial) */
  --link:       var(--tide-600);
  --link-hover: var(--tide-700);

  /* Borders & rules */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-on-ink:  rgba(250, 248, 244, 0.16);

  /* Scrims for text over photography */
  --scrim-bottom: linear-gradient(to top, rgba(17,16,9,0.82) 0%, rgba(17,16,9,0.45) 38%, rgba(17,16,9,0) 100%); /* @kind color */
  --scrim-flat:   rgba(17, 16, 9, 0.55);
}