/* ==================================================
   DESIGN TOKENS
   Purpose:
   Single source of truth for the Codes Atlas System
   visual language — colour, type, spacing, radius,
   elevation and motion. Every other stylesheet reads
   from these custom properties so the whole site can
   be retuned from one file.
================================================== */

:root {
  /* ---- Brand palette -------------------------------------------------
     Sampled from the Codes Atlas System logo: an electric blue set
     against a deep navy. The scale is monochromatic on purpose so the
     single amber accent always reads as a deliberate highlight. */
  --brand-50:  #EEF4FF;
  --brand-100: #DBE7FF;
  --brand-200: #B9D0FF;
  --brand-300: #8FBEFF;
  --brand-400: #4E9BFF;
  --brand-500: #1668FF;
  --brand-600: #0B47D6;
  --brand-700: #0836A6;
  --brand-800: #062877;

  /* Ambient washes. These were hardcoded rgba() values in half a dozen
     stylesheets, which meant the aurora behind the hero stayed blue no matter
     what the rest of the page did. As tokens they follow the accent. */
  --brand-glow:      rgba(22, 104, 255, 0.42);
  --brand-glow-deep: rgba(11, 71, 214, 0.34);
  --brand-wash:      rgba(22, 104, 255, 0.16);

  /* ---- Ink / navy scale ---------------------------------------------- */
  --ink-900: #060C1F;
  --ink-800: #0B1430;
  --ink-700: #16264F;
  --ink-600: #27395F;
  --ink-500: #46587C;
  --ink-400: #6B7D9E;
  --ink-300: #9AA9C4;
  --ink-200: #C6D0E1;
  --ink-100: #E3E9F3;

  /* ---- Surfaces ------------------------------------------------------- */
  --surface:        #FFFFFF;
  --surface-muted:  #F6F8FC;
  --surface-sunken: #EEF2F9;
  --surface-dark:   #060C1F;
  --surface-dark-2: #0B1430;

  /* ---- Accent (used sparingly, never as a second brand colour) -------- */
  --accent-500: #F5A524;
  --accent-100: #FDF0D8;

  /* ---- Semantic ------------------------------------------------------- */
  --success-500: #12A594;
  --success-50:  #E4F6F3;
  --danger-500:  #DC3E42;
  --danger-50:   #FDECEC;

  /* ---- Semantic aliases ----------------------------------------------- */
  --color-primary:      var(--brand-500);
  --color-primary-dark: var(--brand-600);
  --color-secondary:    var(--ink-800);
  --color-text:         var(--ink-800);
  --color-heading:      var(--ink-900);
  --color-muted:        var(--ink-500);
  --color-background:   var(--surface);
  --color-border:       var(--ink-100);
  --color-border-strong:var(--ink-200);
  --color-on-dark:      #FFFFFF;
  --color-on-dark-muted:#9FB2CE;

  /* ---- Typography -----------------------------------------------------
     No webfont is loaded: the stack below resolves to a high quality UI
     face on every target platform, costs zero requests and produces no
     layout shift. See css/base.css for the optional self-hosted upgrade. */
  --font-sans: "Segoe UI Variable Display", "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI",
                  Inter, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas,
               "Liberation Mono", monospace;

  /* Fluid type scale — every step interpolates between 360px and 1440px. */
  /* Capped at 3.5rem rather than 4.5rem: the hero headlines are full
     descriptive sentences ("Custom Software Development Company in Kolkata"),
     and at the larger size they ran to five lines and dominated the banner.
     This keeps them to two or three lines at every width. */
  --fs-display: clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);
  --fs-h1:      clamp(2.05rem, 1.5rem + 2.45vw, 3.35rem);
  --fs-h2:      clamp(1.65rem, 1.3rem + 1.55vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.08rem + 0.53vw, 1.5rem);
  --fs-h4:      clamp(1.05rem, 1rem + 0.22vw, 1.18rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.31vw, 1.22rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78125rem;

  --lh-tight: 1.08;
  --lh-snug:  1.24;
  --lh-body:  1.68;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-wide:  0.02em;
  --tracking-eyebrow: 0.13em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Vertical rhythm for full-width bands. */
  --section-padding: clamp(3.5rem, 2.2rem + 5.4vw, 6.5rem);
  --section-padding-sm: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --gap-grid: clamp(1.125rem, 0.85rem + 1.15vw, 1.75rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container-width: 1200px;
  --container-wide:  1360px;
  --container-narrow: 780px;
  --container-gutter: clamp(1.125rem, 0.7rem + 1.9vw, 2.5rem);
  --header-height: 76px;
  --header-height-compact: 64px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------
     Layered, low-opacity shadows tinted with the navy rather than pure
     black so cards sit on the page instead of floating over it. */
  --shadow-xs: 0 1px 2px rgba(6, 12, 31, 0.06);
  --shadow-sm: 0 2px 6px rgba(6, 12, 31, 0.06), 0 1px 2px rgba(6, 12, 31, 0.04);
  --shadow-md: 0 8px 24px rgba(6, 12, 31, 0.08), 0 2px 6px rgba(6, 12, 31, 0.04);
  --shadow-lg: 0 20px 48px rgba(6, 12, 31, 0.11), 0 6px 14px rgba(6, 12, 31, 0.05);
  --shadow-xl: 0 32px 72px rgba(6, 12, 31, 0.16), 0 10px 24px rgba(6, 12, 31, 0.07);
  --shadow-brand: 0 14px 34px rgba(22, 104, 255, 0.26);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Motion ----------------------------------------------------------- */
  --transition-fast:   140ms cubic-bezier(0.32, 0.72, 0, 1);
  --transition-normal: 260ms cubic-bezier(0.32, 0.72, 0, 1);
  --transition-slow:   480ms cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---- Layering ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-mobile-nav: 400;
  --z-overlay: 500;
  --z-float: 600;

  /* ---- Decorative gradients ----------------------------------------------- */
  --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--brand-50) 0%, #FFFFFF 70%);
  --gradient-night: linear-gradient(165deg, #0B1430 0%, #060C1F 60%, #05091A 100%);
  --gradient-rule: linear-gradient(90deg, transparent, var(--brand-300), transparent);
}

/* ==================================================
   ACCENT PALETTES

   The switcher in the top bar sets data-accent on the
   <html> element and every one of these overrides the
   brand scale beneath it. Nothing else in the site has
   to know: every component already reads --brand-*, so
   one attribute retints the whole thing.

   The default — no attribute — is the blue sampled from
   the logo, so the site's own artwork and its interface
   agree. The alternatives are provided for trying ideas
   out; a permanent change to one of them would want the
   logo revisited to match.
================================================== */

[data-accent="indigo"] {
  --brand-50:  #EEF0FF;
  --brand-100: #E0E3FF;
  --brand-200: #C6CBFF;
  --brand-300: #A5A9FF;
  --brand-400: #7F7CF7;
  --brand-500: #5B4BE8;
  --brand-600: #4433C4;
  --brand-700: #35289B;
  --brand-800: #281F73;
  --brand-glow:      rgba(91, 75, 232, 0.42);
  --brand-glow-deep: rgba(68, 51, 196, 0.34);
  --brand-wash:      rgba(91, 75, 232, 0.16);
}

[data-accent="violet"] {
  --brand-50:  #F5EEFF;
  --brand-100: #EBDDFF;
  --brand-200: #D9BEFF;
  --brand-300: #C098FF;
  --brand-400: #A06BF7;
  --brand-500: #8A3FFC;
  --brand-600: #6E27D6;
  --brand-700: #571DA8;
  --brand-800: #40157C;
  --brand-glow:      rgba(138, 63, 252, 0.40);
  --brand-glow-deep: rgba(110, 39, 214, 0.34);
  --brand-wash:      rgba(138, 63, 252, 0.16);
}

[data-accent="teal"] {
  --brand-50:  #E8F7F5;
  --brand-100: #CFF0EB;
  --brand-200: #9FE0D7;
  --brand-300: #66CBBE;
  --brand-400: #2FB3A2;
  --brand-500: #0E9384;
  --brand-600: #0A7568;
  --brand-700: #085C52;
  --brand-800: #06453E;
  --brand-glow:      rgba(14, 147, 132, 0.42);
  --brand-glow-deep: rgba(10, 117, 104, 0.34);
  --brand-wash:      rgba(14, 147, 132, 0.18);
}

[data-accent="emerald"] {
  --brand-50:  #E9F7EF;
  --brand-100: #D0EFDD;
  --brand-200: #A3DFBB;
  --brand-300: #6CCB93;
  --brand-400: #35B26B;
  --brand-500: #12934F;
  --brand-600: #0D763F;
  --brand-700: #0A5C31;
  --brand-800: #084626;
  --brand-glow:      rgba(18, 147, 79, 0.42);
  --brand-glow-deep: rgba(13, 118, 63, 0.34);
  --brand-wash:      rgba(18, 147, 79, 0.18);
}

[data-accent="orange"] {
  --brand-50:  #FFF2E8;
  --brand-100: #FFE3CE;
  --brand-200: #FFC79D;
  --brand-300: #FFA566;
  --brand-400: #FA8433;
  --brand-500: #E2650F;
  --brand-600: #B84E0A;
  --brand-700: #8F3C08;
  --brand-800: #6B2D06;
  --brand-glow:      rgba(226, 101, 15, 0.40);
  --brand-glow-deep: rgba(184, 78, 10, 0.34);
  --brand-wash:      rgba(226, 101, 15, 0.18);
}

[data-accent="crimson"] {
  --brand-50:  #FFEEF1;
  --brand-100: #FFDCE2;
  --brand-200: #FFB8C4;
  --brand-300: #FF8B9F;
  --brand-400: #F4586F;
  --brand-500: #DC2647;
  --brand-600: #B01536;
  --brand-700: #8A0F2B;
  --brand-800: #660B20;
  --brand-glow:      rgba(220, 38, 71, 0.40);
  --brand-glow-deep: rgba(176, 21, 54, 0.34);
  --brand-wash:      rgba(220, 38, 71, 0.16);
}