/* ============================================================
   COLORS — Suggest Design System
   Base palette (raw ramps) + semantic aliases.
   Sampled from the product screenshots: warm orange brand,
   near-black ink, soft light-gray surfaces, a friendly
   green/red status pair, and a multi-hue data-viz set.
   ============================================================ */

:root {
  /* ---- Brand: Orange ---- */
  --orange-50:  #FEF2EC;
  --orange-100: #FDE1D3;
  --orange-200: #FBC3A6;
  --orange-300: #F89E70;
  --orange-400: #F5772F;
  --orange-500: #F35F27;   /* primary brand */
  --orange-600: #E44E17;
  --orange-700: #BC3D12;
  --orange-800: #952F0F;
  --orange-900: #7A2911;
  --orange-hot: #FF4B08;   /* deepest emphasis (charts, filled bars) */

  /* ---- Ink / Neutral gray ---- */
  --ink-950: #0E0E10;
  --ink-900: #18181B;      /* dark buttons, primary headings */
  --ink-800: #26262B;
  --ink-700: #3F3F46;      /* body text */
  --ink-600: #52525B;
  --ink-500: #71717A;      /* muted / secondary */
  --ink-400: #A1A1AA;      /* placeholder, subtle labels */
  --ink-300: #D4D4D8;      /* strong borders */
  --ink-200: #E7E7EA;      /* default borders / dividers */
  --ink-150: #EFEFF1;      /* faint dividers */
  --ink-100: #F4F4F5;      /* subtle fills */
  --ink-50:  #FAFAFA;      /* table header / inset */
  --white:   #FFFFFF;

  /* ---- Surfaces ---- */
  --app-bg:      #F6F6F5;  /* app canvas */
  --cream:       #FBF2EE;  /* warm peach backdrop behind device frames */
  --cream-deep:  #F6E4DA;

  /* ---- Status ---- */
  --success-500: #14AE51;
  --success-600: #0F8F43;
  --success-bg:  #E7F9EF;
  --danger-500:  #E5484D;
  --danger-600:  #CF3438;
  --danger-bg:   #FDECEC;
  --warning-500: #F0A020;
  --warning-bg:  #FDF3E2;
  --info-500:    #2F73F1;
  --info-bg:     #E9F0FE;

  /* ---- Data visualization ---- */
  --data-cyan:   #1FA9E6;
  --data-blue:   #2F73F1;
  --data-green:  #4CAF50;
  --data-orange: #F35F27;
  --data-pink:   #E5326E;
  --data-purple: #7C6BF5;

  /* ---- Gradients ---- */
  --grad-brand:  linear-gradient(135deg, #FB8140 0%, #F5501B 100%); /* @kind color */
  --grad-track:  linear-gradient(90deg, #FF9B4D 0%, #F15A22 100%); /* @kind color */

  /* ============ SEMANTIC ALIASES ============ */
  --brand:            var(--orange-500);
  --brand-hover:      var(--orange-600);
  --brand-active:     var(--orange-700);
  --brand-subtle:     var(--orange-50);
  --brand-on:         var(--white);

  --text-heading:     var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-subtle:      var(--ink-400);
  --text-on-brand:    var(--white);
  --text-link:        var(--orange-600);

  --surface-page:     var(--app-bg);
  --surface-card:     var(--white);
  --surface-inset:    var(--ink-50);
  --surface-hover:    var(--ink-100);
  --surface-invert:   var(--ink-900);

  --border-default:   var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-faint:     var(--ink-150);

  --focus-ring:       color-mix(in srgb, var(--orange-500) 40%, transparent);
}