/* ============================================================
   KRISHNA SALES — global stylesheet
   Tailwind v4 + design tokens. The @theme inline block wires
   Tailwind's utility namespaces to the CSS-variable tokens, so
   `bg-navy-900`, `rounded-lg`, `shadow-md`, `font-numeric` etc.
   resolve to the design system with zero duplication.
   (Referenced from the lead-to-policy console.)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Inter+Tight:wght@500;600;700;800&display=swap');
@import 'tailwindcss';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';

@theme inline {
  /* ---- Brand: Navy ---- */
  --color-navy-950: var(--navy-950);
  --color-navy-900: var(--navy-900);
  --color-navy-800: var(--navy-800);
  --color-navy-700: var(--navy-700);
  --color-navy-600: var(--navy-600);
  --color-navy-500: var(--navy-500);
  --color-navy-400: var(--navy-400);

  /* ---- Brand: Sunrise ---- */
  --color-sunrise-600: var(--sunrise-600);
  --color-sunrise-500: var(--sunrise-500);
  --color-sunrise-400: var(--sunrise-400);
  --color-sunrise-300: var(--sunrise-300);
  --color-sunrise-200: var(--sunrise-200);
  --color-sunrise-100: var(--sunrise-100);

  /* ---- Semantic: Emerald / Amber / Ruby / Sky ---- */
  --color-emerald-700: var(--emerald-700);
  --color-emerald-600: var(--emerald-600);
  --color-emerald-500: var(--emerald-500);
  --color-emerald-300: var(--emerald-300);
  --color-emerald-100: var(--emerald-100);
  --color-amber-700: var(--amber-700);
  --color-amber-600: var(--amber-600);
  --color-amber-500: var(--amber-500);
  --color-amber-300: var(--amber-300);
  --color-amber-100: var(--amber-100);
  --color-ruby-700: var(--ruby-700);
  --color-ruby-600: var(--ruby-600);
  --color-ruby-500: var(--ruby-500);
  --color-ruby-100: var(--ruby-100);
  --color-sky-700: var(--sky-700);
  --color-sky-600: var(--sky-600);
  --color-sky-500: var(--sky-500);
  --color-sky-100: var(--sky-100);

  /* ---- Neutral: Slate ---- */
  --color-slate-950: var(--slate-950);
  --color-slate-900: var(--slate-900);
  --color-slate-800: var(--slate-800);
  --color-slate-700: var(--slate-700);
  --color-slate-600: var(--slate-600);
  --color-slate-500: var(--slate-500);
  --color-slate-400: var(--slate-400);
  --color-slate-300: var(--slate-300);
  --color-slate-200: var(--slate-200);
  --color-slate-150: var(--slate-150);
  --color-slate-100: var(--slate-100);
  --color-slate-50: var(--slate-50);

  /* ---- Semantic aliases (short, readable utility names) ---- */
  --color-app: var(--z-body-bg);
  --color-card: var(--z-block-bg);
  --color-sunk: var(--z-bg-plain);
  --color-strong: var(--z-text-default);
  --color-body: var(--z-text-default);
  --color-muted: var(--z-text-muted);
  --color-faint: var(--z-text-secondary);
  --color-on-navy: var(--z-text-inverse);
  --color-on-navy-muted: var(--z-text-secondary);
  --color-accent: var(--z-text-primary);
  --color-link: var(--z-text-primary);
  --color-border-subtle: var(--z-border-default);
  --color-border-default: var(--z-border-secondary);

  /* ---- Radii ---- */
  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-2xl: var(--radius-2xl);
  --radius-pill: var(--radius-pill);

  /* ---- Elevation ---- */
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-sunrise: var(--shadow-sunrise);

  /* ---- Fonts ---- */
  --font-sans: var(--font-sans);
  --font-numeric: var(--font-numeric);
  --font-mono: var(--font-mono);

  /* ---- Type scale ---- */
  --text-2xs: var(--text-2xs);
  --text-xs: var(--text-xs);
  --text-sm: var(--text-sm);
  --text-base: var(--text-base);
  --text-md: var(--text-md);
  --text-lg: var(--text-lg);
  --text-xl: var(--text-xl);
  --text-2xl: var(--text-2xl);
  --text-3xl: var(--text-3xl);
  --text-4xl: var(--text-4xl);
  --text-5xl: var(--text-5xl);
  --text-6xl: var(--text-6xl);
}

@layer base {
  html {
    height: 100%;
  }

  body,
  #root {
    min-height: 100%;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--surface-app);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
  }
}

@layer components {

  /* Brand gradients — not expressible as plain utilities. */
  .bg-sunrise {
    background-image: var(--gradient-sunrise);
  }

  .bg-sunrise-soft {
    background-image: var(--gradient-sunrise-soft);
  }

  .bg-navy-grad {
    background-image: var(--gradient-navy);
  }

  /* Tabular figures for aligning currency & counts. */
  .nums {
    font-variant-numeric: tabular-nums;
  }

  /* Primary focus ring on inputs/selects. */
  .focus-ring:focus-within {
    border-color: var(--z-btn-primary-bg);
    box-shadow: var(--shadow-focus);
  }

  /* Slim, theme-tinted scrollbar for in-panel scroll areas. */
  .scrollbar-slim {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }

  .scrollbar-slim::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .scrollbar-slim::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-slim::-webkit-scrollbar-thumb {
    background-color: var(--border-default);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 9999px;
  }

  .scrollbar-slim:hover::-webkit-scrollbar-thumb {
    background-color: var(--text-faint);
  }
}

/* root variable  */

:root {
  --primary-color: #1F4D36;
  --secondary-color: #fdf4e4de;
  --font-color: #10182b;
  --font-family: "IBM Plex Sans", serif;
  --light-font-color: #667085;
  --body-bg: #f0f4f8;
  --bg-plain: #fff;
  --bg-active: #00000014;
  --border: #e5e7eb;
  --shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3);
  --hover: #e4e4e4;
  --hover-font: #fff;
  --hover-bg: #f9fafb;
  --hover-border: #667085;
  --menu-item-bg: rgba(255, 255, 255, 0.1);


  /* Navbar background color */
  --nav-bg-color: linear-gradient(91deg, #063b21 0.17%, #0d663a 99.89%);
  --nav-item-color: #10182b;
  --nav-item-active: #1b84ff;
  --nav-item-active-bg: #c0d4ed45;
  --nav-item-border-bottom: transparent;
  --nav-dropdown-bg: #fff;

  /* Matching the navbar color */
  --nav-dropdown-color: #4B5675;
  --nav-dropdown-active: #2e56e1;
  --nav-dropdown-active-bg: #F9F9F9;
  --nav-dropdown-border: none;
  --nav-dropdown-radius: 4px;
  --nav-dropdown-padding: 10px;
  --menu-item-radius: 4px;
  --p-8: 0px;
  --nav-border: rgba(255, 255, 255, 0.1);
  --nav-left-separator-line: #484848;

  /* tiles card */
  --tiles-card-bg: #FFFBF4;
  --tiles-card-border: #e5e7eb00;
  --tiles-font-color: #1F4D36;
  --tiles-font-size: 16px;
  --tiles-count-size: 20px;

  /* button */
  --z-btn-primary-bg: #1F4D36;
  --z-btn-primary-color: #fff;
  --primary-btn-active: #1d613f;
  --primary-btn-activeClr: #fff;
  --z-btn-secondary-bg: #f4f4f4;
  --z-btn-secondary-color: #10182b;
  --secondary-btn-active-bg: #eaeaea;
  --z-btn-outline-color: #1F4D36;
  --z-btn-outline-border: #1F4D36;

  --button-height: 36px;
  --z-btn-sm-height: 32px;
  --z-btn-md-height: 40px;
  --z-btn-lg-height: 48px;

  /* blocks */
  --block-bg: var(--tiles-card-bg);
  --block-padding: 20px;
  --block-radius: 20px;
  --block-border: #e5e7eb;
  /* --block-shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3); */
  --block-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);

  /* button or input  */
  --button-radius: 8px;
  --input-shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3);
  --input-border: #e5e7eb;

  /* font-size */
  --small-font: 14px;
  --medium-font: 16px;
  --large-font: 20px;
  --z-btn-font-sm: 12px;
  --z-btn-font-md: 14px;
  --z-btn-font-lg: 16px;

  --small-icon: 24px;

  /* record view table color */
  --rv-table-bg: #FFFBF4;
  --rv-table-header: #FFFBF4;
  --table-row-bg-select: #fafafa;
  --table-tr-active: #f9fafb;
  --rv-table-height: 40px;
  --rv-table-btn-height: 36px;
  --table-td-padding: 8px 20px;

  /* form input tags */
  --form-input-height: 40px;
  --form-bg: var(--tiles-card-bg);
  --form-input-bg: #fff;
  --inputBox-border: ##e5e7eb;
  --inputBox-border-active: #a2acbf;
  --disable-bg: #fafafa;
  --disable-color: #98a2b3;

  --toolTip-color: #2185d0;
  --toolTip-active-clr: #208fe3;

  /* new template style variables */
  --z-body-bg: #f0f4f8;
  --z-bg-plain: #fff;

  --z-bg-primary: #0058be;
  --z-bg-secondary: #f4f4f4;
  --z-bg-success: #1fc16b;
  --z-bg-error: #fa3748;
  --z-bg-light: #ffffff;
  --z-bg-dark: #1e2227;

  --z-text-default: #10182b;
  --z-text-primary: #0058be;
  --z-text-secondary: #6c757d;
  --z-text-success: #fff;
  --z-text-error: #fff;
  --z-text-muted: #6c757d;
  --z-text-inverse: #ffffff;
  --z-text-plain: #fff;


  --z-bg-active: #3d94fb;

  --z-border-primary: #0058be;
  --z-border-secondary: #ced4da;
  --z-border-success: #1fc16b;
  --z-border-error: #fa3748;

  --z-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --z-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --z-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);

  --z-font-size-xs: 10px;
  --z-font-size-sm: 12px;
  --z-font-size-md: 14px;
  --z-font-size-lg: 16px;
  --z-font-size-xl: 20px;

  --z-border-size-sm: 1px;
  --z-border-size-md: 2px;
  --z-border-size-lg: 4px;

  --z-border-radius-sm: 4px;
  --z-border-radius-md: 8px;
  --z-border-radius-lg: 16px;
  --z-border-radius-full: 50%;
  --z-border-radius-pill: 30px;

  /* app default text */
  --z-font-sm: 14px;
  --z-font-md: 16px;
  --z-font-lg: 20px;

  /* button style */
  --z-btn-radius: 8px;
  --z-btn-height: 44px;

  /* block and section styles */
  --z-block-bg: var(--tiles-card-bg);
  --z-block-radius: 8px;
  --z-block-border: #e5e7eb;
  --z-block-shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* record view table */
  --z-rv-table-bg: var(--rv-table-bg);
  --z-rv-table-header: var(--rv-table-header);
  --z-rv-td-padding: var(--table-td-padding);
  --z-rv-table-border: #e5e7eb;
  --z-rv-td-height: 40px;

  --z-tile-bg: #fff;
  --z-tile-border: #e5e7eb;

  /*-----------------New BG Color Palatte----------------*/

  /* Primary Colors */
  --z-bg-primary-100: #c0d4ed;
  --z-bg-primary-200: #83b6f4;
  --z-bg-primary-300: #5aa2f8;
  --z-bg-primary-400: #0058be;

  /* Secondary Colors */
  --z-bg-secondary-100: #ffce8d;
  --z-bg-secondary-200: #ffbb62;
  --z-bg-secondary-300: #faa73b;
  --z-bg-secondary-400: #f5f6f7;

  /* Gradient Colors */
  --z-bg-gradient-1: linear-gradient(90deg, #0058be 0%, #104F99 100%);
  --z-bg-gradient-2: linear-gradient(90deg, #1C38A7 0%, #2E55DF 100%);
  --z-bg-gradient-3: linear-gradient(94.13deg, #83B6F4 2.64%, #2B6BBA 97.36%);
  --z-bg-gradient-4: linear-gradient(99.74deg, #A0C5F4 4.16%, #EFF3F8 97.03%);

  /* Neutral Colors */
  --z-bg-neutral-100: #ffffff;
  --z-bg-neutral-200: #f9fafb;
  --z-bg-neutral-300: #e5e7eb;
  --z-bg-neutral-400: #d0d5dd;
  --z-bg-neutral-500: #98a2b3;
  --z-bg-neutral-600: #667085;
  --z-bg-neutral-700: #475467;
  --z-bg-neutral-800: #1d2939;
  --z-bg-neutral-900: #10182b;
  --z-bg-neutral-1000: #0c1323;

  /* Danger Colors */
  --z-bg-danger-100: #fecdca;
  --z-bg-danger-200: #fda29b;
  --z-bg-danger-300: #f97066;
  --z-bg-danger-400: #f04438;

  /* Warning Colors */
  --z-bg-warning-100: #ffdf89;
  --z-bg-warning-200: #fec84b;
  --z-bg-warning-300: #ffdb43;
  --z-bg-warning-400: #dfb400;

  /* Success Colors */
  --z-bg-success-100: oklch(97.9% .021 166.113);
  --z-bg-success-200: #6ce9a6;
  --z-bg-success-300: #32d584;
  --z-bg-success-400: #12b76a;

  /*-----------------New Text Color Palatte----------------*/

  /* Primary Colors */
  --z-text-primary-100: #c0d4ed;
  --z-text-primary-200: #83b6f4;
  --z-text-primary-300: #5aa2f8;
  --z-text-primary-400: #0058be;

  /* Secondary Colors */
  --z-text-secondary-100: #ffce8d;
  --z-text-secondary-200: #ffbb62;
  --z-text-secondary-300: #faa73b;
  --z-text-secondary-400: #f79009;

  /* Neutral Colors */
  --z-text-neutral-100: #ffffff;
  --z-text-neutral-200: #f9fafb;
  --z-text-neutral-300: #e5e7eb;
  --z-text-neutral-400: #d0d5dd;
  --z-text-neutral-500: #98a2b3;
  --z-text-neutral-600: #667085;
  --z-text-neutral-700: #475467;
  --z-text-neutral-800: #1d2939;
  --z-text-neutral-900: #10182b;
  --z-text-neutral-1000: #0c1323;

  /* Danger Colors */
  --z-text-danger-100: #fecdca;
  --z-text-danger-200: #fda29b;
  --z-text-danger-300: #f97066;
  --z-text-danger-400: #f04438;

  /* Warning Colors */
  --z-text-warning-100: #ffdf89;
  --z-text-warning-200: #fec84b;
  --z-text-warning-300: #ffdb43;
  --z-text-warning-400: #dfb400;

  /* Success Colors */
  --z-text-success-100: #a6f4c5;
  --z-text-success-200: #6ce9a6;
  --z-text-success-300: #32d584;
  --z-text-success-400: #12b76a;

  /*-----------------New Border Color Palatte----------------*/

  /* Primary Colors */
  --z-border-default: #e5e7eb;
  --z-border-primary-100: #c0d4ed;
  --z-border-primary-200: #83b6f4;
  --z-border-primary-300: #5aa2f8;
  --z-border-primary-400: #0058be;

  /* Secondary Colors */
  --z-border-secondary-100: #ffce8d;
  --z-border-secondary-200: #f3cfc4;
  --z-border-secondary-300: #ebaf9d;
  --z-border-secondary-400: #f79009;

  /* Neutral Colors */
  --z-border-neutral-100: #ffffff;
  --z-border-neutral-200: #f9fafb;
  --z-border-neutral-300: #e5e7eb;
  --z-border-neutral-400: #d0d5dd;
  --z-border-neutral-500: #98a2b3;
  --z-border-neutral-600: #667085;
  --z-border-neutral-700: #475467;
  --z-border-neutral-800: #1d2939;
  --z-border-neutral-900: #10182b;
  --z-border-neutral-1000: #0c1323;

  /* Danger Colors */
  --z-border-danger-100: #fecdca;
  --z-border-danger-200: #fda29b;
  --z-border-danger-300: #f97066;
  --z-border-danger-400: #f04438;

  /* Warning Colors */
  --z-border-warning-100: #ffdf89;
  --z-border-warning-200: #fec84b;
  --z-border-warning-300: #ffdb43;
  --z-border-warning-400: #dfb400;

  /* Success Colors */
  --z-border-success-100: #a6f4c5;
  --z-border-success-200: #6ce9a6;
  --z-border-success-300: #32d584;
  --z-border-success-400: #12b76a;
}