/* ============================================================
   Marsa Foundation — Color
   Concept: "A harbour at the edge of two worlds."
     Ink + warm archival paper (from the black-on-white logo),
     a deep MARINE (sea / anchor / depth) as primary brand colour,
     and a warm CLAY (Arab earth / warmth) as the counter-accent.
   NOTE: Marsa supplied a black logo and Isidora Sans only — no colour
   spec. This palette is the design system's proposal and is FLAGGED
   for Marsa's review.
   ============================================================ */

:root {
  /* ---- Neutrals: warm ink → archival paper ---- */
  --ink-900: #181715;   /* logo black, primary text */
  --ink-800: #2A2823;
  --ink-700: #3C3933;
  --ink-600: #57534A;   /* secondary text */
  --slate-500: #756F64;  /* muted / meta text */
  --slate-400: #9A9285;
  --mist-300: #C2BAAB;
  --line-200: #DBD3C4;   /* hairlines on paper */
  --line-100: #E8E1D3;
  --paper-2: #ECE5D7;    /* alt / sunken surface */
  --paper: #F4EEE1;      /* primary background (warm paper) */
  --shell: #FBF8F1;      /* cards / raised surfaces */
  --white: #FFFFFF;

  /* ---- Marine (primary brand) ---- */
  --marine-900: #0C2926;
  --marine-800: #103B36;
  --marine-700: #154B44;
  --marine-600: #1C5A52;  /* base */
  --marine-500: #2C6F66;
  --marine-400: #538C83;
  --marine-300: #88B0A9;
  --marine-200: #B6D0CB;
  --marine-100: #DCE9E6;
  --marine-050: #ECF3F1;

  /* ---- Clay (counter-accent / warmth) ---- */
  --clay-900: #6E2A14;
  --clay-800: #8E3A1D;
  --clay-700: #AC4724;
  --clay-600: #C5532B;   /* base */
  --clay-500: #D46B45;
  --clay-400: #E0906E;
  --clay-300: #ECB69D;
  --clay-200: #F4D6C6;
  --clay-100: #FAEAE0;

  /* ---- Sand / ochre (tertiary signal, used sparingly) ---- */
  --ochre-600: #BF8A2E;
  --ochre-500: #D4A441;
  --ochre-300: #ECCE8C;
  --ochre-100: #F8EDD3;

  /* ---- Moss (positive) ---- */
  --moss-600: #3F7242;
  --moss-300: #A9C7A4;
  --moss-100: #E4EEDF;

  /* ---- Rust (critical) ---- */
  --rust-600: #B23A1F;
  --rust-300: #E2A793;
  --rust-100: #F7E0D7;

  /* ============================================================
     SEMANTIC ALIASES — author against these, not the raw ramps.
     ============================================================ */

  /* Text */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--slate-500);
  --text-faint: var(--slate-400);
  --text-on-dark: var(--shell);
  --text-on-dark-muted: var(--marine-200);
  --text-on-accent: var(--shell);
  --text-link: var(--marine-700);
  --text-link-hover: var(--clay-700);

  /* Surfaces */
  --surface-page: var(--paper);
  --surface-sunken: var(--paper-2);
  --surface-card: var(--shell);
  --surface-raised: var(--white);
  --surface-inverse: var(--ink-900);
  --surface-brand: var(--marine-600);
  --surface-brand-strong: var(--marine-800);
  --surface-brand-soft: var(--marine-050);
  --surface-accent: var(--clay-600);
  --surface-accent-soft: var(--clay-100);

  /* Lines & borders */
  --border-hairline: var(--line-200);
  --border-soft: var(--line-100);
  --border-strong: var(--ink-900);
  --border-brand: var(--marine-600);
  --border-on-dark: rgba(251, 248, 241, 0.18);

  /* Interactive (brand button) */
  --action: var(--marine-600);
  --action-hover: var(--marine-700);
  --action-active: var(--marine-800);
  --action-soft: var(--marine-050);
  --focus-ring: var(--clay-600);

  /* Status */
  --status-positive: var(--moss-600);
  --status-positive-soft: var(--moss-100);
  --status-caution: var(--ochre-600);
  --status-caution-soft: var(--ochre-100);
  --status-critical: var(--rust-600);
  --status-critical-soft: var(--rust-100);
  --status-info: var(--marine-600);
  --status-info-soft: var(--marine-050);

  /* Selection */
  --selection-bg: var(--clay-200);
  --selection-fg: var(--ink-900);
}

/* Inverse scope: drop this class on dark/marine sections so
   tokens flip without rewriting component CSS. */
.marsa-on-dark {
  --text-strong: var(--shell);
  --text-body: var(--marine-100);
  --text-muted: var(--marine-300);
  --text-faint: var(--marine-400);
  --surface-card: var(--marine-800);
  --surface-raised: var(--marine-700);
  --border-hairline: var(--border-on-dark);
  --border-soft: rgba(251, 248, 241, 0.10);
  --text-link: var(--clay-300);
  --text-link-hover: var(--shell);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }