/* ===========================================================================
   siriusly.ai - Color tokens (terracotta + black, dark theme)
   Imported from the "siriusly.ai Design System" Claude Design project.
   Terracotta (#B8674A, the logo colour) is the primary; the canvas is a warm near-black "Coal" ramp.
   =========================================================================== */
:root {
  /* ---- Brand: Terracotta (primary) ----
     500 is the logo colour; the ramp is built around it. It is a mid-tone,
     so fills carry white type, and as type it steps up the ramp on dark
     (400, 5.9:1) and down it on paper (700, 6.5:1). */
  --orange-50: #FBF3EF;
  --orange-100: #F5E1D8;
  --orange-200: #EBC3B3;
  --orange-300: #DFA28B;
  --orange-400: #CF8467;
  --orange-500: #B8674A;
  --orange-600: #9C523A;
  --orange-700: #7E412E;
  --orange-800: #5F3123;
  --orange-900: #3D2017;
  --orange-950: #24130D;

  /* ---- Brand: Gold (bright accent / highlight) ---- */
  --gold-50: #FFF8E6;
  --gold-100: #FDECBF;
  --gold-200: #FADB8A;
  --gold-300: #F7C955;
  --gold-400: #F4B72E;
  --gold-500: #F0A81C;
  --gold-600: #CE8A12;
  --gold-700: #A66C10;
  --gold-800: #6E480F;
  --gold-900: #43290B;

  /* ---- Neutrals: warm Coal ---- */
  --ink: #0A0908;
  --coal-950: #14120F;
  --coal-900: #1C1A17;
  --coal-800: #262320;
  --coal-700: #34302B;
  --coal-600: #4A453E;
  --coal-500: #5F5950;
  --coal-400: #8A8379;
  --coal-300: #B4ADA2;
  --coal-200: #D8D3C9;
  --coal-100: #ECE9E2;
  --coal-50: #F6F4EF;
  --white: #FFFFFF;

  /* ---- Semantic hues ---- */
  --green-500: #57C46B;
  --green-900: #123016;
  --red-500: #FF5A4D;
  --red-900: #3A1512;

  /* ---- Semantic aliases (use these in UI) ---- */
  --color-primary: var(--orange-500);
  --color-primary-hover: var(--orange-600);
  --color-primary-active: var(--orange-700);
  --color-primary-soft: var(--orange-900);
  /* terracotta as type: 400 reads on dark; light mode steps down to 700 */
  --color-primary-text: var(--orange-400);
  /* Accent is terracotta too - no gold or orange in the brand. Gold
     survives only as --status-warning. */
  --color-accent: var(--orange-400);
  --color-accent-hover: var(--orange-300);
  --color-accent-soft: var(--orange-900);

  --text-strong: var(--white);
  --text-body: var(--coal-200);
  --text-muted: var(--coal-400);
  --text-subtle: var(--coal-500);
  --text-on-brand: var(--white);
  --text-link: var(--orange-400);

  /* "Ember corner" (design system background study): the canvas lifts off
     coal-950 to a warmer #1E1A16, which is where coal-900 used to sit. So every
     surface and border above it steps up one stop on the ramp too - the
     relationships are unchanged, the whole app is one stop lighter. The page
     itself is a flat colour; its bloom and Skylight mark live in tokens/base.css. */
  --surface-page: #1E1A16;
  --surface-card: var(--coal-800);
  --surface-sunken: var(--coal-950);
  --surface-inverse: var(--coal-50);
  --surface-hover: var(--coal-700);

  --border-subtle: var(--coal-700);
  --border-default: var(--coal-600);
  --border-strong: var(--coal-500);
  --border-focus: var(--orange-500);

  --status-success: var(--green-500);
  --status-success-soft: var(--green-900);
  --status-warning: var(--gold-400);
  --status-warning-soft: var(--gold-900);
  --status-danger: var(--red-500);
  --status-danger-soft: var(--red-900);

  /* Signature gradient - hero moments / brand marks. Terracotta only:
     deep to light, no gold end. Carries white type. */
  --gradient-signature: linear-gradient(120deg, var(--orange-600) 0%, var(--orange-400) 100%);
  --gradient-night: linear-gradient(180deg, var(--coal-900) 0%, var(--ink) 100%);
}