/*
Theme Name: Croissance Tech
Theme URI: https://example.com
Author: Chander
Description: Custom theme for Croissance Tech
Version: 1.0
Text Domain: croissance
*/
/* --- Root Variables and Base Styles --- */
:root {
	/* Base Colors */
	--color-black: #000;
	--color-white: #fff;
	--ct-white: #fff;
	--background: #fff;
	--card: #fff;
	--popover: #FFFFFF;

	/* Text & Foreground */
	--foreground: #0A0A0A;
	--card-foreground: #0A0A0A;
	--popover-foreground: #0A0A0A;
	--sidebar-foreground: #0A0A0A;
	--primary-foreground: #fff;
	--secondary-foreground: #0a3d62;
	--muted-foreground: #6b7280;
	--accent-foreground: #fff;
	--destructive-foreground: #fff;
	--sidebar-primary-foreground: #FAFAFA;
	--sidebar-accent-foreground: #171717;

	/* Primary Palette */
	--primary: #0a3d62;
	--secondary: #f5f6fa;
	--muted: #f5f6fa;
	--accent: #f39c12;
	--destructive: #d4183d;

	/* Sidebar */
	--sidebar: #FAFAFA;
	--sidebar-primary: #0a3d62;
	--sidebar-accent: #F5F5F5;
	--sidebar-border: #E5E5E5;
	--sidebar-ring: #A1A1A1;

	/* Charts */
	--chart-1: #EC5600;
	--chart-2: #009488;
	--chart-3: #104E64;
	--chart-4: #FABC00;
	--chart-5: #F69E00;

	/* Greens */
	--color-green-100: #DCFCE7;
	--color-green-200: #B9F8CF;
	--color-green-500: #00C65A;
	--color-green-600: #00A447;

	/* Grays */
	--color-gray-50: #F9FAFB;
	--color-gray-100: #F3F4F6;
	--color-gray-200: #E5E7EB;
	--color-gray-300: #D1D5DC;
	--color-gray-500: #6A7282;
	--color-gray-600: #4A5565;
	--color-gray-700: #364153;

	/* Utility / Brand */
	--ct-deep-blue: #0a3d62;
	--ct-orange: #f39c12;
	--ct-light-gray: #f5f6fa;
	--pastel-orange: #ffb347;
	--ring: #0a3d62;
	--border: #0000001a;
	--input-background: #f5f6fa;
	--switch-background: #cbced4;

	/* Extra Colors */
	--color-gainsboro: #ddd;
	--color-whisper: #eee;

	/* Transparent Variants */
	--color-0a143259: #0a143259;
	--color-00000033: #00000033;
	--color-ffa50066: #ffa50066;
	--color-ffffff1f: #ffffff1f;
	--color-0000001a: #0000001a;
	--color-00000080: #00000080;
	--color-007bff1a: #007bff1a;
	--color-0000000d: #0000000d;
	--color-ffa5004d: #ffa5004d;
	--color-ffa50099: #ffa50099;
	--color-ffffffb3: #ffffffb3;
	--color-0f27480d: #0f27480d;

    --input: transparent;
    --font-size: 16px;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --radius: .625rem;
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-2xl: 1rem;
    --drop-shadow-sm: 0 1px 2px #00000026;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
    --color-border: var(--border);
    --banner-height: 48px;
    --full-height-with-banner: calc(100dvh - var(--banner-height));
    --ct-d-width-100: 100%;
    --ct-d-height-1: 1px;
    --ct-d-height-2: 2px;
    --ct-d-height-3: 3px;
    --ct-d-radius-1: 1px;
    --ct-d-radius-2: 2px;
    --ct-d-radius-3: 3px;    
    font-synthesis: none;
    text-align: left;
    view-transition-name: root;
}

body.dark_mode {
	/* Base Colors */
	--background: #0e0f11; /* deep neutral, softer than pure black */
	--card: #181a1e;       /* slightly lighter for elevation */
	--popover: #1f2126;    /* floating surfaces */
	
	/* Text & Foreground */
	--foreground: #f4f4f5; /* near white, high contrast */
	--card-foreground: #e5e5e6;
	--popover-foreground: #e5e5e6;
	--sidebar-foreground: #e5e5e6;
	--primary-foreground: #fff;
	--secondary-foreground: #a5b4fc; /* soft indigo accent for links */
	--muted-foreground: #9ca3af;     /* muted gray */
	--accent-foreground: #fff;
	--destructive-foreground: #fff;
	--sidebar-primary-foreground: #f9fafb;
	--sidebar-accent-foreground: #fafafa;

	/* Primary Palette (keep branding, but adjusted for dark) */
	--primary: #4f8fcf;        /* lighter variant of your deep blue */
	--secondary: #2a2d33;      /* subtle dark gray surface */
	--muted: #2f3238;
	--accent: #f39c12;         /* brand orange stays vibrant */
	--destructive: #ef4444;    /* modern red */

	/* Sidebar */
	--sidebar: #1a1c20;
	--sidebar-primary: #4f8fcf;
	--sidebar-accent: #2f3238;
	--sidebar-border: #2d2f36;
	--sidebar-ring: #4f8fcf;

	/* Charts (adjusted for dark backgrounds, WCAG friendly) */
	--chart-1: #ff7849; 
	--chart-2: #34d399;
	--chart-3: #60a5fa;
	--chart-4: #facc15;
	--chart-5: #fb923c;

	/* Greens */
	--color-green-100: #064e3b;
	--color-green-200: #065f46;
	--color-green-500: #10b981;
	--color-green-600: #059669;

	/* Grays */
	--color-gray-50: #111827;
	--color-gray-100: #1f2937;
	--color-gray-200: #374151;
	--color-gray-300: #4b5563;
	--color-gray-500: #6b7280;
	--color-gray-600: #9ca3af;
	--color-gray-700: #d1d5db;

	/* Utility / Brand */
	--ct-deep-blue: #4f8fcf;
	--ct-orange: #f39c12;
	--ct-light-gray: #2a2d33;
	--pastel-orange: #ffb347;
	--ring: #4f8fcf;
	--border: #ffffff1a;
	--input-background: #1f2126;
	--switch-background: #374151;

	/* Extra Colors */
	--color-gainsboro: #2f3238;
	--color-whisper: #3f4249;

	/* Transparent Variants */
	--color-0a143259: #ffffff1f;
	--color-00000033: #ffffff33;
	--color-ffa50066: #f39c1266;
	--color-ffffff1f: #ffffff1f;
	--color-0000001a: #ffffff1a;
	--color-00000080: #ffffff80;
	--color-007bff1a: #4f8fcf1a;
	--color-0000000d: #ffffff0d;
	--color-ffa5004d: #f39c124d;
	--color-ffa50099: #f39c1299;
	--color-ffffffb3: #ffffffb3;
	--color-0f27480d: #4f8fcf0d;
}



/* -----------------------------
   Base + Accessibility Helpers
   ----------------------------- */
:root { --ct-focus-ring: color-mix(in srgb, var(--ring) 60%, transparent); }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 100%; 
  height: 100%;
}

*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--border);
    margin: 0;
    padding: 0;
    outline-color: var(--ring);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: calc(var(--radius) / 2);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.interactive, button, [role="button"], a { -webkit-tap-highlight-color: transparent; }

/* -----------------------------
   Document structure
   ----------------------------- */
body {
    min-height: 100vh;
    font: 1em/1.5 var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    color: var(--foreground);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-text-size-adjust: 100%;
    display: block;
    margin: 0;
    padding-top: calc((var(--spacing) * 16) + 2.7rem);
    -webkit-tap-highlight-color: transparent;
}

body.has-scrolled {
    padding-top: calc((var(--spacing) * 12) + 2.7rem);
}

main { display: block; }
header, footer, nav, section, article, aside { display: block; }

/* -----------------------------
   Headings & text
   ----------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  margin: 0 0 0.6rem 0;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1rem 0; font-size: var(--text-base, 1rem); color: var(--foreground); }
small, .small { font-size: var(--text-sm); color: var(--muted-foreground); }
strong { font-weight: var(--font-weight-bold); }
em { font-style: italic; }

mark { background-color: color-mix(in srgb, var(--accent) 12%, transparent); padding: .125rem .25rem; border-radius: .25rem; }

/* -----------------------------
   Links
   ----------------------------- */

/* -----------------------------
   Lists
   ----------------------------- */

/* -----------------------------
   Images, media & responsive
   ----------------------------- */

/* -----------------------------
   Blockquote / hr
   ----------------------------- */
blockquote {
  margin: 0 0 1rem 0;
  padding: .5rem 1rem;
  border-left: 4px solid var(--muted-foreground, #ddd);
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--popover) 4%, transparent);
  border-radius: calc(var(--radius) / 3);
}

hr { height: 1px; border: none; background: var(--color-gray-200, var(--border)); margin: 1.25rem 0; }

/* -----------------------------
   Tables
   ----------------------------- */
table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0 0 1rem 0; }
th, td { padding: .625rem .75rem; text-align: left; border-bottom: 1px solid var(--color-gray-200); }
th { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); color: var(--sidebar-primary-foreground); background: transparent; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }

/* -----------------------------
   Forms
   ----------------------------- */


/* -----------------------------
   Code, pre, keyboard
   ----------------------------- */
code, kbd, samp, pre { font-family: var(--default-mono-font-family, var(--font-mono)); font-feature-settings: var(--default-mono-font-feature-settings); }
code { background: color-mix(in srgb, var(--color-gray-50, #f3f4f6) 60%, transparent); padding: .125rem .25rem; border-radius: .25rem; font-size: .92em; }
pre { background: color-mix(in srgb, var(--popover) 6%, transparent); padding: .875rem 1rem; border-radius: calc(var(--radius-xs) * 2); overflow: auto; font-size: .9rem; }
kbd { display: inline-block; padding: .125rem .35rem; border-radius: .25rem; background: color-mix(in srgb, var(--color-gray-100, #f3f4f6) 60%, transparent); border: 1px solid var(--color-gray-200); }

/* -----------------------------
   Details / summary
   ----------------------------- */
details { margin: 0 0 1rem 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* -----------------------------
   Dialogs
   ----------------------------- */
dialog { border: none; padding: 0; border-radius: var(--radius); background: var(--card); color: var(--card-foreground); box-shadow: var(--drop-shadow-lg); }
dialog::backdrop { background: color-mix(in srgb, var(--background) 85%, black 15%); }

/* -----------------------------
   Overlay (default)
   ----------------------------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
	transition: opacity var(--default-transition-duration) var(--ease-in-out), visibility var(--default-transition-duration) var(--ease-in-out);
}
.modal-overlay.active {
    display: flex;
}

/* -----------------------------
   Misc interactive & semantics
   ----------------------------- */
[disabled], :disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }

.badge { display: inline-block; padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; background: var(--muted); color: var(--accent-foreground); }

/* -----------------------------
   Tabs
   ----------------------------- */

/* -----------------------------
   Print adjustments
   ----------------------------- */
@media print {
  a::after { content: " (" attr(href) ")"; }
  nav, .no-print { display: none !important; }
}

/* -----------------------------
   Small helpers & tokens
   ----------------------------- */
.kicker { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--muted-foreground); }
.row { display: flex; gap: 1rem; align-items: center; }
.col { flex: 1; }


@supports (color: color-mix(in lab, red, red)) {
    * {
        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
    .bg-white\/90 {
        background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
}

/* End of default element styles */
