/* Arkos — Color tokens
   Primary palette + secondary palette from the Arkos Brandbook (Oct 2025).
   Base values are raw brand colors; semantic aliases map them to UI roles. */

:root {
  /* ---- Brand primaries ---- */
  --arkos-black: #030505;       /* Pantone Black 6 C — core ink, dark surfaces */
  --arkos-paper: #F5F5F5;       /* Pantone Warm Gray 1 C — light surface / paper */
  --arkos-red: #FF3B1F;         /* Pantone Bright Red C — signature accent */

  /* ---- Brand secondaries ---- */
  --arkos-orange: #E84F03;      /* Pantone 166 C — deeper orange */
  --arkos-gray: #999696;        /* Pantone Cool Gray 7 C — mid gray */
  --arkos-ink-2: #333333;       /* Pantone Black 7 C — soft ink */

  /* ---- Signature gradient (the "data-flow" gradient) ---- */
  --arkos-gradient: linear-gradient(155deg, #FF3B1F 0%, #E84F03 100%);       /* @kind color */
  --arkos-gradient-soft: linear-gradient(155deg, #FF5A3F 0%, #E84F03 100%);  /* @kind color */

  /* ---- Neutral ramp (derived from brand black / grays, warm-cool neutral) ---- */
  --neutral-0: #FFFFFF;
  --neutral-50: #F5F5F5;
  --neutral-100: #ECECEC;
  --neutral-200: #DCDCDC;
  --neutral-300: #C4C3C3;
  --neutral-400: #999696;
  --neutral-500: #6E6C6C;
  --neutral-600: #4F4E4E;
  --neutral-700: #333333;
  --neutral-800: #1A1B1B;
  --neutral-900: #0E0F0F;
  --neutral-950: #030505;

  /* ---- Accent ramp (around the brand red/orange) ---- */
  --accent-50: #FFEDE8;
  --accent-100: #FFD6CB;
  --accent-200: #FFB3A1;
  --accent-300: #FF8569;
  --accent-400: #FF5A3F;
  --accent-500: #FF3B1F;   /* brand red */
  --accent-600: #E84F03;   /* brand orange */
  --accent-700: #C13C00;
  --accent-800: #8F2D00;
  --accent-900: #5E1E00;

  /* ---- Semantic status ---- */
  --status-success: #1F8A5B;
  --status-warning: #E8A203;
  --status-danger: #D92D20;
  --status-info: #3A6FE8;

  /* ---- Semantic surfaces (light theme — default) ---- */
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-inverse: var(--neutral-950);
  --surface-accent: var(--accent-500);
  --surface-accent-soft: var(--accent-50);

  /* ---- Semantic text ---- */
  --text-strong: var(--neutral-950);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-500);
  --text-subtle: var(--neutral-400);
  --text-on-accent: #FFFFFF;
  --text-on-inverse: var(--neutral-50);
  --text-accent: var(--accent-600);

  /* ---- Borders / lines ---- */
  --border-subtle: rgba(3, 5, 5, 0.08);
  --border-default: rgba(3, 5, 5, 0.14);
  --border-strong: rgba(3, 5, 5, 0.28);
  --border-accent: var(--accent-500);
  --border-on-inverse: rgba(245, 245, 245, 0.14);

  /* ---- Focus ---- */
  --focus-ring: rgba(255, 59, 31, 0.45);
}

/* ---- Dark scope: apply .arkos-dark on a wrapper for inverse surfaces ---- */
.arkos-dark {
  --surface-page: var(--neutral-950);
  --surface-card: var(--neutral-900);
  --surface-raised: var(--neutral-800);
  --surface-sunken: #000000;
  --surface-inverse: var(--neutral-50);
  --surface-accent-soft: rgba(255, 59, 31, 0.12);

  --text-strong: #FFFFFF;
  --text-body: var(--neutral-200);
  --text-muted: var(--neutral-400);
  --text-subtle: var(--neutral-500);
  --text-on-inverse: var(--neutral-950);

  --border-subtle: rgba(245, 245, 245, 0.08);
  --border-default: rgba(245, 245, 245, 0.14);
  --border-strong: rgba(245, 245, 245, 0.30);
  --border-on-inverse: rgba(3, 5, 5, 0.14);
}