/* =====================================================================
   Design tokens - SOP Central Repository
   Waaree house palette: green #00793F, accent #37B34B, teal #0E9A8A

   Values are taken from the waaree-portal reference implementation so the two
   portals look like one product. Names are this project's own, which is what
   lets every page pick up the reference look without markup changes.
   ===================================================================== */

:root {
    /* Brand */
    --brand:         #00793F;
    --brand-600:     #026B39;
    --brand-700:     #015C31;
    --brand-800:     #014323;
    --brand-900:     #04251A;   /* sidebar foot, auth backdrop */
    --brand-sidebar: #083826;   /* sidebar head */
    --brand-200:     #A6D9BC;
    --brand-100:     #DCEFE4;
    --brand-050:     #F0F8F3;

    --accent:        #37B34B;
    --accent-600:    #2E9C40;
    --accent-700:    #257E33;
    --accent-100:    #E8F6EC;   /* accent-soft in the reference */
    --accent-200:    #9BE7AE;   /* icon glyphs on dark green */

    --teal:          #0E9A8A;
    --teal-100:      #DEF3F1;

    /* Ink and surface */
    --ink-900: #2B2C2D;
    --ink-800: #3B3C3E;
    --ink-700: #4C4D4F;
    --ink-600: #61686B;
    --ink-500: #64748B;
    --ink-400: #94A3B8;
    --ink-300: #CBD5E1;
    --ink-200: #E2E8F0;
    --ink-100: #EEF2F7;
    --ink-050: #F6F8FB;

    --surface:        #FFFFFF;
    --surface-sunken: #F3F7F4;
    --surface-raised: #FCFEFD;   /* the top stop of a card's gradient */
    --line:           #E9EFEB;   /* card borders */
    --line-soft:      #F1F5F2;   /* dividers inside a card */

    /* Semantic */
    --success:    #1F7A2B;
    --success-bg: #E4F5E6;
    --warning:    #9A5B08;
    --warning-bg: #FDF1DE;
    --danger:     #B3382A;
    --danger-bg:  #FBE9E6;
    --info:       #1E5F86;
    --info-bg:    #E4F1F8;
    --neutral:    #475569;
    --neutral-bg: #EDF1F6;

    /* Chart series - stable order across every chart */
    --chart-1: #00793F;
    --chart-2: #37B34B;
    --chart-3: #0E9A8A;
    --chart-4: #C9822B;
    --chart-5: #2E6E9E;
    --chart-6: #8C5BA6;
    --chart-7: #B5474A;
    --chart-8: #6B7280;

    /* Typography.
       The reference loads Inter from Google Fonts; a strict CSP blocks external
       hosts here, so this is the closest system stack. Inter's tabular figures
       are replicated with font-variant-numeric on the classes that need them. */
    --font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    /* The ramp is one notch down from the original, against a 13px body. Every
       step is still a whole pixel at a 16px root - a half-pixel type size is
       what makes a dense table look blurred rather than sharp. */
    --text-xs:  0.6875rem;   /* 11 */
    --text-sm:  0.75rem;     /* 12 */
    --text-md:  0.8125rem;   /* 13 - the body size */
    --text-lg:  0.875rem;    /* 14 */
    --text-xl:  1rem;        /* 16 */
    --text-2xl: 1.1875rem;   /* 19 */
    --text-3xl: 1.375rem;    /* 22 */

    /* Spacing. sp-1 and sp-2 are untouched: they are already hairline gaps, and
       shrinking them further would close up icon/label pairs. Everything above
       them tightens, which is most of what reads as "compact". */
    --sp-1: 0.25rem;         /* 4 */
    --sp-2: 0.5rem;          /* 8 */
    --sp-3: 0.625rem;        /* 10 */
    --sp-4: 0.75rem;         /* 12 */
    --sp-5: 0.875rem;        /* 14 */
    --sp-6: 1.125rem;        /* 18 */
    --sp-8: 1.5rem;          /* 24 */
    --sp-10: 1.875rem;       /* 30 */
    --sp-12: 2.25rem;        /* 36 */

    /* Radius and elevation.
       At this density a 16px radius eats the corner of a 29px row, so the scale
       drops to 6/8/10. Cards carry their edge in a 1px border now rather than in
       a shadow: a wide ambient glow under every card reads as haze once the
       cards are this close together.

       Overlays keep their depth. A dropdown, the notification panel and a modal
       sit ON the page rather than in it - flattened to match the cards they
       would float on nothing, which is why --sh-lg is unchanged. */
    --r-sm:   6px;
    --r:      8px;
    --r-lg:   10px;
    --r-full: 999px;

    --sh-xs: 0 1px 1px rgba(16,40,28,.03);
    --sh-sm: 0 1px 2px rgba(16,40,28,.05);
    --sh:    0 1px 5px rgba(11,74,47,.09);
    --sh-lg: 0 2px 4px rgba(16,40,28,.05), 0 20px 48px -18px rgba(16,40,28,.34);
    --sh-brand: 0 4px 10px -6px rgba(0,121,63,.40);

    /* Layout - the compact geometry. The nav is nine items, not a file tree. */
    --sidebar-w:  184px;
    --topbar-h:   46px;
    --content-max: 1560px;

    /* The three geometry constants the dense components share, so a row, a gap
       and a control height stay in step with each other rather than being
       re-chosen per component. */
    --row: 29px;
    --gap: 9px;
    --ctl: 28px;

    --t: 150ms cubic-bezier(.4, 0, .2, 1);
}