/* SolarFlow AI POC — design tokens. Single source of visual truth.
   Re-themed from the VegiVash system: solar/energy brand.
   NOTE: the brand ramp keeps the legacy --green-* variable names so the ported
   component library works unchanged — but the values are now a confident BLUE
   ramp (AI / tech), and --leaf/--leaf-deep are now the SOLAR GOLD accent. */
:root {
  /* Brand ramp — confident blue (named --green-* for component compatibility) */
  --green-950: #0A1430;   /* darkest navy — sidebar top */
  --green-900: #0E1E44;
  --green-800: #14306B;
  --green-700: #1D4ED8;   /* PRIMARY — buttons, active states, icons */
  --green-600: #2563EB;   /* secondary brand blue */
  --green-500: #3B82F6;
  --green-150: #C7DBFB;   /* light blue border */
  --green-100: #DBE8FE;
  --green-50:  #EFF5FF;   /* very light blue background */
  --leaf:      #F5A623;   /* SOLAR GOLD accent — energy, CTAs, "sun" */
  --leaf-deep: #E8920C;

  /* Convenience aliases for new solar components (point at the ramp above) */
  --brand-700: var(--green-700); --brand-600: var(--green-600); --brand-500: var(--green-500);
  --navy-950: var(--green-950);  --navy-900: var(--green-900);
  --solar-600: var(--leaf-deep); --solar-500: var(--leaf); --solar-300: #FAD27A;
  --sky-100: var(--green-100);   --sky-50: var(--green-50);

  /* Cool slate neutrals */
  --ink:    #0F1B2D;
  --ink-2:  #27364B;
  --mut:    #5A6B82;
  --mut-2:  #93A1B5;
  --line:   #E2E8F0;
  --line-2: #EEF2F7;
  --canvas: #F4F7FC;
  --surface:#FFFFFF;
  --surface-2:#F7FAFE;

  /* Status hues */
  --amber:   #95590A; --amber-bg: #FBF0DA; --amber-bd: #EECF96;
  --red:     #B3261E; --red-bg:   #FBE9E7; --red-bd:   #EFBCB6;
  --blue:    #1A5FA8; --blue-bg:  #E7F0FA; --blue-bd:  #BFD7EF;
  --indigo:  #4D4DC0; --indigo-bg:#EBEBFA; --indigo-bd:#C9C9EE;
  --cyan:    #0C6E8A; --cyan-bg:  #E1F3F8; --cyan-bd:  #B3DDEA;
  --teal:    #0D7264; --teal-bg:  #DFF3F0; --teal-bd:  #ADDFD7;
  --slate:   #56656E; --slate-bg: #EDF1F3; --slate-bd: #CFD9DE;
  --yellow:  #946A00; --yellow-bg: #FFF7DC; --yellow-bd: #EAD9A0;

  /* Alert priority levels */
  --crit: var(--red);  --imp: var(--amber);  --info: var(--green-600);

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Control sizing — touch targets (Apple/Google min 44px) */
  --tap: 48px;
  --tap-lg: 56px;
  --control-h: 44px;
  --control-h-lg: 52px;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* Geometry */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15,27,45,.05), 0 1px 3px rgba(15,27,45,.07);
  --sh-2: 0 4px 14px rgba(15,27,45,.09), 0 14px 36px rgba(15,27,45,.12);
  --ring: 0 0 0 3px rgba(37,99,235,.24);

  /* Motion — strong custom curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (pointer: coarse) {
  :root { --control-h: 52px; }
}