/* ============================================================
   HELIX × CAPGEMINI DESIGN SYSTEM — Design Tokens
   Adapted from Metachrosis Design System, aligned to
   Capgemini Brand Identity Guidelines (October 2025)
   ============================================================ */

/* ------------------------------------------------------------
   GREY SCALE
   ------------------------------------------------------------ */
:root {
--grey-white: #ffffff;
--grey-2: #f4f4f4;
--grey-3: #e0e0e0;
--grey-4: #c6c6c6;
--grey-5: #a8a8a8;
--grey-6: #8d8d8d;
--grey-7: #6f6f6f;
--grey-8: #525252;
--grey-9: #393939;
--grey-black: #000000;

/* ------------------------------------------------------------
   BASE COLOR SCALES
   ------------------------------------------------------------ */

/* Capgemini Blue — Primary CTA palette
   Capgemini Blue: #0058AB (Pantone 2144 C) */
--cap-blue-25: #f0f7ff;
--cap-blue-50: #deeeff;
--cap-blue-100: #b6d8ff;
--cap-blue-200: #87beff;
--cap-blue-300: #52a0f5;
--cap-blue-400: #2080e0;
--cap-blue-500: #006ec8;
--cap-blue-600: #0058ab; /* Main CTA — Capgemini Blue */
--cap-blue-700: #00438a;
--cap-blue-800: #003069;
--cap-blue-900: #001e47;

/* Capgemini Light Blue — Secondary CTA palette
   Light Blue: #1DB8F2 (Pantone 2995 C) */
--cap-lightblue-25: #f0fbff;
--cap-lightblue-50: #def6fe;
--cap-lightblue-100: #b4eafd;
--cap-lightblue-200: #82dcfb;
--cap-lightblue-300: #4ccbf7;
--cap-lightblue-400: #29bef4;
--cap-lightblue-500: #1dbef5;
--cap-lightblue-600: #1db8f2; /* Main Secondary — Light Blue */
--cap-lightblue-700: #0e9ccf;
--cap-lightblue-800: #087daa;
--cap-lightblue-900: #055e82;

/* Capgemini Turquoise — Gradient accent / tertiary
   Turquoise: #00D5D0 (Pantone 2239 C) */
--cap-turquoise-25: #f0fffe;
--cap-turquoise-50: #defffd;
--cap-turquoise-100: #b3f8f6;
--cap-turquoise-200: #7aeff0;
--cap-turquoise-300: #3de6e3;
--cap-turquoise-400: #13dcd8;
--cap-turquoise-500: #00d8d3;
--cap-turquoise-600: #00d5d0; /* Turquoise — gradient / tertiary */
--cap-turquoise-700: #00b3ae;
--cap-turquoise-800: #008e8a;
--cap-turquoise-900: #006865;

/* Capgemini Dark Blue — Hero canvas / dark surfaces
   Dark Blue: #121A38 (Pantone 4145 C) */
--cap-darkblue-25: #f0f2f8;
--cap-darkblue-50: #dce0ee;
--cap-darkblue-100: #b4bcdb;
--cap-darkblue-200: #8896c2;
--cap-darkblue-300: #5e71a8;
--cap-darkblue-400: #3d5090;
--cap-darkblue-500: #253872;
--cap-darkblue-600: #1a2855;
--cap-darkblue-700: #121a38; /* Capgemini Dark Blue — canvas */
--cap-darkblue-800: #0b1026;
--cap-darkblue-900: #060916;

/* Green — Success semantic */
--green-25: #f6fef9;
--green-50: #ecfdf3;
--green-100: #d1fadf;
--green-200: #a6f4c5;
--green-300: #6ce9a6;
--green-400: #32d583;
--green-500: #12b76a;
--green-600: #099250;
--green-700: #027a48;
--green-800: #05603a;
--green-900: #054f31;

/* Teal — Capgemini secondary palette
   Teal: #00828E (Pantone 7474 C) */
--teal-25: #f0fafa;
--teal-50: #dcf5f5;
--teal-100: #b3e9ea;
--teal-200: #7adcdd;
--teal-300: #3dcbcd;
--teal-400: #12babc;
--teal-500: #00a4a8;
--teal-600: #00828e; /* Capgemini Teal */
--teal-700: #006670;
--teal-800: #004d54;
--teal-900: #003438;

/* Red — Error semantic */
--red-25: #fffbfa;
--red-50: #fef3f2;
--red-100: #fee4e2;
--red-200: #fecdca;
--red-300: #fda29b;
--red-400: #f97066;
--red-500: #f04438;
--red-600: #d92d20;
--red-700: #b42318;
--red-800: #912018;
--red-900: #7a271a;

/* Yellow — Warning semantic */
--yellow-25: #fefdf0;
--yellow-50: #fefbe8;
--yellow-100: #fef7c3;
--yellow-200: #feee95;
--yellow-300: #fde272;
--yellow-400: #fac515;
--yellow-500: #eaaa08;
--yellow-600: #ca8504;
--yellow-700: #a15c07;
--yellow-800: #854a0e;
--yellow-900: #713b12;

/* Orange — Capgemini secondary palette
   Orange: #FF816E (Pantone 2345 C) */
--orange-25: #fff6f5;
--orange-50: #ffece9;
--orange-100: #ffd4ce;
--orange-200: #ffb5ab;
--orange-300: #ff9285;
--orange-400: #ff816e; /* Capgemini Orange */
--orange-500: #f56452;
--orange-600: #e04836;
--orange-700: #be3020;
--orange-800: #97200e;
--orange-900: #721408;

/* Lilac — Capgemini secondary palette
   Lilac: #D4D3F1 (Pantone 270 C) */
--lilac-25: #faf9ff;
--lilac-50: #f4f3fe;
--lilac-100: #e9e8fd;
--lilac-200: #d4d3f1; /* Capgemini Lilac */
--lilac-300: #b8b6e8;
--lilac-400: #9795d8;
--lilac-500: #7a78c8;
--lilac-600: #5e5cb0;
--lilac-700: #474592;
--lilac-800: #332f72;
--lilac-900: #221e52;

/* Terracotta — Capgemini secondary palette
   Terracotta: #BE4D00 (Pantone 7579 C) */
--terracotta-25: #fff5ef;
--terracotta-50: #fde8d8;
--terracotta-100: #f8ccae;
--terracotta-200: #f0a87b;
--terracotta-300: #e4804a;
--terracotta-400: #d4611e;
--terracotta-500: #be4d00; /* Capgemini Terracotta */
--terracotta-600: #9c3d00;
--terracotta-700: #7a2e00;
--terracotta-800: #5a2100;
--terracotta-900: #3c1600;

/* Deep Red — Capgemini secondary palette
   Deep Red: #8F3237 (Pantone 7622 C) */
--deep-red-25: #fdf5f5;
--deep-red-50: #f8e8e9;
--deep-red-100: #f0cdd0;
--deep-red-200: #e2a8ac;
--deep-red-300: #ce7e83;
--deep-red-400: #b4575d;
--deep-red-500: #9b3e44;
--deep-red-600: #8f3237; /* Capgemini Deep Red */
--deep-red-700: #72252a;
--deep-red-800: #561b1f;
--deep-red-900: #3a1014;

/* Purple — Capgemini secondary palette
   Purple: #71609E (Pantone 7669 C) */
--purple-25: #f8f7fc;
--purple-50: #eeedf8;
--purple-100: #dcdaf0;
--purple-200: #c1bde4;
--purple-300: #a29ad4;
--purple-400: #8679bf;
--purple-500: #7d6faa;
--purple-600: #71609e; /* Capgemini Purple */
--purple-700: #5a4c82;
--purple-800: #443966;
--purple-900: #2e264a;

/* Capgemini Yellow — secondary palette
   Yellow: #FEB100 (Pantone 130 C) */
--cap-yellow-25: #fffcf0;
--cap-yellow-50: #fff7d6;
--cap-yellow-100: #feeea8;
--cap-yellow-200: #fee172;
--cap-yellow-300: #fdd040;
--cap-yellow-400: #feb100; /* Capgemini Yellow */
--cap-yellow-500: #d99500;
--cap-yellow-600: #b37a00;
--cap-yellow-700: #8c5e00;
--cap-yellow-800: #664400;
--cap-yellow-900: #402b00;

/* ------------------------------------------------------------
   BRAND COLORS
   ------------------------------------------------------------ */
--brand-cap-blue: #0058ab;       /* Capgemini Blue — Pantone 2144 C */
--brand-cap-lightblue: #1db8f2;  /* Light Blue — Pantone 2995 C */
--brand-cap-darkblue: #121a38;   /* Dark Blue — Pantone 4145 C */
--brand-cap-turquoise: #00d5d0;  /* Turquoise — Pantone 2239 C */
--brand-cap-yellow: #feb100;     /* Yellow — Pantone 130 C */
--brand-cap-orange: #ff816e;     /* Orange — Pantone 2345 C */
--brand-cap-lilac: #d4d3f1;      /* Lilac — Pantone 270 C */
--brand-cap-teal: #00828e;       /* Teal — Pantone 7474 C */
--brand-cap-terracotta: #be4d00; /* Terracotta — Pantone 7579 C */
--brand-cap-deep-red: #8f3237;   /* Deep Red — Pantone 7622 C */
--brand-cap-purple: #71609e;     /* Purple — Pantone 7669 C */

/* ------------------------------------------------------------
   SERVICE PILLAR COLOURS
   Used by diamond navigator and service catalogue components.
   ------------------------------------------------------------ */
--mode-sensing:        #D1247A; /* Sensing & Insights */
--mode-orchestration:  #0058AB; /* Orchestration */
--mode-data:           #896BED; /* Data & Content */
--mode-generative:     #10A284; /* Generative Execution */

/* ------------------------------------------------------------
   PROGRESS BAR GRADIENT
   Capgemini Progress Bar: Dark Blue → Blue → Light Blue → Turquoise
   Use left-to-right for horizontal; bottom-to-top for vertical.
   ------------------------------------------------------------ */
--gradient-progress: linear-gradient(
  to right,
  #121a38 0%,
  #0058ab 30%,
  #1db8f2 70%,
  #00d5d0 100%
);
--gradient-progress-vertical: linear-gradient(
  to top,
  #121a38 0%,
  #0058ab 30%,
  #1db8f2 70%,
  #00d5d0 100%
);

/* ------------------------------------------------------------
   SEMANTIC: PRIMARY INTERACTION STATES
   Keyed on Capgemini Blue #0058AB
   ------------------------------------------------------------ */
--primary-state-default: #0058ab14;
--primary-state-hover: #0058ab0a;
--primary-state-focused: #0058ab1f;
--primary-state-selected: #0058ab14;
--primary-state-activated: #0058ab1f;
--primary-state-pressed: #0058ab29;
--primary-state-dragged: #0058ab14;

/* ------------------------------------------------------------
   SEMANTIC: SECONDARY INTERACTION STATES
   Keyed on Light Blue #1DB8F2
   ------------------------------------------------------------ */
--secondary-state-default: #1db8f214;
--secondary-state-hover: #1db8f20a;
--secondary-state-focused: #1db8f21f;
--secondary-state-selected: #1db8f214;
--secondary-state-activated: #1db8f21f;
--secondary-state-pressed: #1db8f229;
--secondary-state-dragged: #1db8f214;

/* ------------------------------------------------------------
   STATES ON DARK SURFACE
   ------------------------------------------------------------ */
--dark-state-default: #ffffff1a;
--dark-state-hover: #ffffff0a;
--dark-state-focused: #ffffff1f;
--dark-state-selected: #ffffff14;
--dark-state-activated: #ffffff1f;
--dark-state-pressed: #ffffff29;
--dark-state-dragged: #ffffff14;

/* ------------------------------------------------------------
   STATES ON SURFACE (LIGHT)
   ------------------------------------------------------------ */
--surface-state-default: #00000014;
--surface-state-hover: #0000000a;
--surface-state-focused: #0000001f;
--surface-state-selected: #00000014;
--surface-state-activated: #0000001f;
--surface-state-pressed: #00000029;
--surface-state-dragged: #00000014;

/* ------------------------------------------------------------
   TYPOGRAPHY COLORS
   ------------------------------------------------------------ */
--text-dark-high: #fffffff2;
--text-dark-medium: #ffffffbf;
--text-dark-disabled: #ffffff61;
--text-surface-high: #000000f2;
--text-surface-medium: #000000bf;
--text-surface-disabled: #00000061;

/* ------------------------------------------------------------
   SURFACE
   ------------------------------------------------------------ */
--surface-bg: #ffffff;
--surface-outline: #0000001f;
--surface-screen-overlay: #00000061;
--surface-dark-bg: #121a38;  /* Capgemini Dark Blue — hero canvas */

/* Primary CTA surface */
--primary-cta-surface: #ffffff;

/* ------------------------------------------------------------
   ELEVATION (box-shadows)
   ------------------------------------------------------------ */
--elevation-01: 0px 1px 2px 0px #0000000d;
--elevation-02: 0px 1px 2px 0px #0000000f, 0px 1px 3px 0px #0000001a;
--elevation-03: 0px 4px 6px -2px #00000008, 0px 12px 16px -4px #00000014;
--elevation-04: 0px 4px 6px -2px #00000008, 0px 12px 16px -4px #00000014;
--elevation-05: 0px 8px 8px -4px #10182808, 0px 20px 24px -4px #10182814;
--elevation-06: 0px 24px 48px -12px #0000002e;
--elevation-07: 0px 32px 64px -12px #00000024;

/* Reverse Elevation — use on dark / Capgemini Dark Blue surfaces */
--elevation-rev-01: 0px -1px 2px 0px #0000000d;
--elevation-rev-02: 0px -1px 2px 0px #0000000f, 0px -1px 3px 0px #0000001a;
--elevation-rev-03: 0px -2px 4px -2px #0000000f, 0px -4px 8px -2px #0000001a;
--elevation-rev-04: 0px -4px 6px -2px #00000008, 0px -12px 16px -4px #00000014;
--elevation-rev-05: 0px -8px 8px -4px #10182808, 0px -20px 24px -4px #10182814;
--elevation-rev-06: 0px -24px 48px -12px #0000002e;
--elevation-rev-07: 0px -32px 64px -12px #00000024;

/* ------------------------------------------------------------
   FONT FAMILIES
   Ubuntu typeface — Capgemini brand font
   Weights used: Light 300, Regular 400, Medium 500, Bold 700
   ------------------------------------------------------------ */
--font-display: "Ubuntu", "Helvetica Neue", Helvetica, sans-serif;
--font-body: "Ubuntu", "Helvetica Neue", Helvetica, sans-serif;
--font-label: "Ubuntu", "Helvetica Neue", Helvetica, sans-serif;

/* ------------------------------------------------------------
   FONT SIZES
   ------------------------------------------------------------ */
--fs-10: 0.625rem;   /* 10px */
--fs-12: 0.75rem;    /* 12px */
--fs-14: 0.875rem;   /* 14px */
--fs-16: 1rem;       /* 16px */
--fs-20: 1.25rem;    /* 20px */
--fs-24: 1.5rem;     /* 24px */
--fs-34: 2.125rem;   /* 34px */
--fs-48: 3rem;       /* 48px */
--fs-60: 3.75rem;    /* 60px */
--fs-96: 6rem;       /* 96px */

/* ------------------------------------------------------------
   LINE HEIGHTS
   ------------------------------------------------------------ */
--lh-112: 7rem;      /* 112px — display */
--lh-72: 4.5rem;     /* 72px */
--lh-56: 3.5rem;     /* 56px */
--lh-36: 2.25rem;    /* 36px */
--lh-24: 1.5rem;     /* 24px */
--lh-20: 1.25rem;    /* 20px */
--lh-16: 1rem;       /* 16px */

/* ------------------------------------------------------------
   LETTER SPACING
   ------------------------------------------------------------ */
--ls-0: 0px;
--ls-01: 0.15px;
--ls-02: 0.1px;
--ls-03: 0.5px;
--ls-04: 0.25px;
--ls-05: 1.5px;
--ls-06: 1.25px;
--ls-07: 0.4px;

/* ------------------------------------------------------------
   FONT WEIGHTS — Ubuntu
   ------------------------------------------------------------ */
--fw-ubuntu-light: 300;
--fw-ubuntu-regular: 400;
--fw-ubuntu-medium: 500;
--fw-ubuntu-bold: 700;
}

/* ============================================================
   TYPOGRAPHY SYSTEM — Composite Styles
   Ubuntu typeface throughout, aligned to Capgemini brand usage:
   - Hero/headline: Ubuntu Light at large sizes, Medium for emphasis
   - Introduction/body: Ubuntu Regular, Italic for highlights
   - Labels/eyebrows/buttons: Ubuntu Medium/Bold, uppercase, tracked
   ============================================================ */

/* Headlines — Ubuntu (display role) */
.mc-headline-01 {
font-family: var(--font-display);
font-weight: var(--fw-ubuntu-light);
font-size: var(--fs-96);
line-height: var(--lh-112);
letter-spacing: var(--ls-0);
text-transform: none;
text-decoration: none;
}
.mc-headline-02 {
font-family: var(--font-display);
font-weight: var(--fw-ubuntu-light);
font-size: var(--fs-60);
line-height: var(--lh-72);
letter-spacing: var(--ls-0);
text-transform: none;
text-decoration: none;
}
.mc-headline-03 {
font-family: var(--font-display);
font-weight: var(--fw-ubuntu-light);
font-size: var(--fs-48);
line-height: var(--lh-56);
letter-spacing: var(--ls-0);
text-transform: none;
text-decoration: none;
}
.mc-headline-04 {
font-family: var(--font-display);
font-weight: var(--fw-ubuntu-light);
font-size: var(--fs-34);
line-height: var(--lh-36);
letter-spacing: var(--ls-0);
text-transform: none;
text-decoration: none;
}
.mc-headline-05 {
font-family: var(--font-display);
font-weight: var(--fw-ubuntu-light);
font-size: var(--fs-24);
line-height: var(--lh-24);
letter-spacing: var(--ls-0);
text-transform: none;
text-decoration: none;
}
.mc-headline-06 {
font-family: var(--font-display);
font-weight: var(--fw-ubuntu-medium);
font-size: var(--fs-20);
line-height: var(--lh-24);
letter-spacing: var(--ls-0);
text-transform: none;
text-decoration: none;
}

/* Subtitles — Ubuntu Regular */
.mc-subtitle-01 {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-size: var(--fs-16);
line-height: var(--lh-24);
letter-spacing: var(--ls-01);
text-transform: none;
text-decoration: none;
}
.mc-subtitle-02 {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-medium);
font-size: var(--fs-14);
line-height: var(--lh-24);
letter-spacing: var(--ls-02);
text-transform: none;
text-decoration: none;
}

/* Body 1 — Ubuntu Regular, 16px */
.mc-body-1 {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-size: var(--fs-16);
line-height: var(--lh-24);
letter-spacing: var(--ls-03);
text-transform: none;
text-decoration: none;
}
.mc-body-1-strong {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-medium);
font-size: var(--fs-16);
line-height: var(--lh-24);
letter-spacing: var(--ls-03);
text-transform: none;
text-decoration: none;
}
.mc-body-1-italic {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-style: italic;
font-size: var(--fs-16);
line-height: var(--lh-24);
letter-spacing: var(--ls-03);
text-transform: none;
text-decoration: none;
}
.mc-body-1-strong-italic {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-bold);
font-style: italic;
font-size: var(--fs-16);
line-height: var(--lh-24);
letter-spacing: var(--ls-03);
text-transform: none;
text-decoration: none;
}
.mc-body-1-link {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-size: var(--fs-16);
line-height: var(--lh-24);
letter-spacing: var(--ls-03);
text-transform: none;
text-decoration: underline;
}

/* Body 2 — Ubuntu Regular, 14px */
.mc-body-2 {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-size: var(--fs-14);
line-height: var(--lh-20);
letter-spacing: var(--ls-04);
text-transform: none;
text-decoration: none;
}
.mc-body-2-strong {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-medium);
font-size: var(--fs-14);
line-height: var(--lh-20);
letter-spacing: var(--ls-04);
text-transform: none;
text-decoration: none;
}
.mc-body-2-italic {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-style: italic;
font-size: var(--fs-14);
line-height: var(--lh-20);
letter-spacing: var(--ls-04);
text-transform: none;
text-decoration: none;
}
.mc-body-2-strong-italic {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-bold);
font-style: italic;
font-size: var(--fs-14);
line-height: var(--lh-20);
letter-spacing: var(--ls-04);
text-transform: none;
text-decoration: none;
}
.mc-body-2-link {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-size: var(--fs-14);
line-height: var(--lh-20);
letter-spacing: var(--ls-04);
text-transform: none;
text-decoration: underline;
}

/* Alternative styles */
.mc-eyebrow {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-medium);
font-size: var(--fs-10);
line-height: var(--lh-16);
letter-spacing: var(--ls-05);
text-transform: uppercase;
text-decoration: none;
}
.mc-button-text {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-medium);
font-size: var(--fs-14);
line-height: var(--lh-16);
letter-spacing: var(--ls-06);
text-transform: uppercase;
text-decoration: none;
}
.mc-caption {
font-family: var(--font-body);
font-weight: var(--fw-ubuntu-regular);
font-size: var(--fs-12);
line-height: var(--lh-16);
letter-spacing: var(--ls-07);
text-transform: none;
text-decoration: none;
}
.mc-label {
font-family: var(--font-label);
font-weight: var(--fw-ubuntu-bold);
font-size: var(--fs-10);
line-height: var(--lh-16);
letter-spacing: var(--ls-07);
text-transform: uppercase;
text-decoration: none;
}