/*
 * Design Tokens
 *
 * All CSS custom properties for the design system.
 * Single source of truth for colors, spacing, typography, etc.
 *
 * Synced with Figma: oMpX9tPDpKvnEIkDDqiSQ9
 *
 * UNIT DECISION: Using px to match Figma specs exactly.
 * Future consideration: rem (16px base) for accessibility,
 * or clamp() for fluid responsive scaling.
 * Token architecture allows incremental migration without
 * changing block CSS — just update values here.
 */

:root {
  /* ============================================
     BREAKPOINTS
     ============================================ */
  --bp-mobile: 599px;
  --bp-tablet: 899px;
  --bp-desktop: 1199px;

  /* ============================================
     BRAND COLORS
     Synced with Figma
     ============================================ */
  --digicert-blue: #0174c3;           /* Primary/Base */
  --digicert-medium-blue: #002a48;    /* Primary/Medium blue */
  --digicert-dark-blue: #001524;      /* Primary/Dark blue */
  --digicert-deep-blue: #083d77;      /* Gradient stop */
  --digicert-grey: #48565e;           /* Neutrals/800 */
  --digicert-teal: #59c3c3;           /* Accent/Teal */
  --digicert-red: #f95738;            /* Accent/Quantum red */
  --digicert-orange: #ee964a;         /* Accent/Orange */
  --digicert-yellow: #f5d35e;         /* Accent/Yellow */
  --digicert-black: #222;             /* Neutrals/Black */
  --digicert-ink: #090a0a;            /* Ink/Darkest */
  --digicert-white: #fff;             /* Neutrals/White */

  /* ============================================
     GRADIENTS
     Synced with Figma
     ============================================ */
  --gradient-primary: linear-gradient(to right, var(--digicert-deep-blue), var(--digicert-blue));
  --gradient-primary-vertical: linear-gradient(to bottom, var(--digicert-deep-blue), var(--digicert-blue));

  /* ============================================
     NEUTRAL SCALE
     Synced with Figma
     ============================================ */
  --digicert-neutral-900: #334147;
  --digicert-neutral-800: #48565e;
  --digicert-neutral-700: #5e6c75;
  --digicert-neutral-600: #707e86;
  --digicert-neutral-500: #909ca5;
  --digicert-neutral-400: #abb6bf;
  --digicert-neutral-300: #c1cbd3;
  --digicert-neutral-200: #d2dce3;
  --digicert-neutral-100: #e9eef1;

  /* ============================================
     SEMANTIC COLORS
     ============================================ */
  --background-color: var(--digicert-white);
  --surface-color: var(--digicert-white);
  --light-color: color-mix(in srgb, var(--digicert-neutral-100), var(--digicert-white) 50%);
  --dark-color: var(--digicert-grey);
  --text-color: var(--digicert-black);
  --text-muted: var(--digicert-neutral-600);
  --link-color: var(--digicert-blue);
  --link-hover-color: color-mix(in srgb, var(--digicert-blue), var(--digicert-black) 15%);
  --overlay-background-color: var(--digicert-neutral-200);

  /* Borders */
  --border-color: var(--digicert-neutral-200);
  --border-color-strong: var(--digicert-neutral-400);

  /* Text on background variants */
  --text-light-on-dark: var(--digicert-white);
  --text-dark-on-light: var(--digicert-black);

  /* Overlay colors */
  --overlay-dark: rgb(0 0 0 / 50%);
  --overlay-light: rgb(255 255 255 / 80%);

  /* Shadows */
  --shadow-color: rgb(0 0 0 / 10%);
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 4px 6px var(--shadow-color), 0 1px 3px var(--shadow-color);
  --shadow-lg: 0 10px 15px var(--shadow-color), 0 4px 6px var(--shadow-color);

  /* Panel shadows — header-anchored panels (search, minicart, etc.) */
  --panel-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  --panel-clip-below: inset(0 -24px -24px -24px);

  /* ============================================
     STATE COLORS
     ============================================ */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline-color: currentcolor;
  --state-disabled-opacity: 0.6;

  /* Opacity tokens */
  --opacity-decorative: 0.3;
  --opacity-decorative-subtle: 0.2;

  /* ============================================
     TYPOGRAPHY
     Synced with Figma
     ============================================ */

  /* Font families */
  --body-font-family: 'Roboto', roboto-fallback, sans-serif;
  --heading-font-family: 'Roboto Condensed', roboto-condensed-fallback, sans-serif;
  --heading-semicondensed-font-family: 'Roboto Semicondensed', roboto-semicondensed-fallback, sans-serif;
  --font-family-decorative: georgia, 'Times New Roman', serif;

  /* Font weights - semantic naming */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Letter spacing for Roboto Condensed headings */
  --letter-spacing-heading: -0.015em;

  /* Body sizes (mobile-first) - Synced with Figma */
  --body-font-size-l: 24px;
  --body-font-size-m: 18px;
  --body-font-size-s: 16px;
  --body-font-size-xs: 14px;
  --body-font-size-xxs: 12px;

  /* Heading sizes (mobile-first) - Synced with Figma */
  --heading-font-size-xxl: 48px;
  --heading-font-size-xl: 32px;
  --heading-font-size-l: 28px;
  --heading-font-size-m: 24px;
  --heading-font-size-s: 20px;
  --heading-font-size-xs: 18px;

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-button: 20px;

  /* ============================================
     SPACING SCALE
     Synced with Figma
     ============================================ */
  --space-xs: 0.25rem;  /* 4px */
  --space-s: 0.5rem;    /* 8px */
  --space-m: 1rem;      /* 16px */
  --space-l: 1.5rem;    /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 2.5rem;  /* 40px */
  --space-3xl: 3rem;    /* 48px */
  --space-4xl: 4rem;    /* 64px */
  --space-5xl: 5rem;    /* 80px */
  --space-6xl: 5.625rem; /* 90px */

  /* ============================================
     LAYOUT
     Synced with Figma and header alignment
     ============================================ */
  --container-max-width: 1248px;
  --container-padding: 1.5rem;  /* 24px */
  --grid-gap: 1.5rem;           /* 24px */

  /* Nav heights - Synced with Figma */
  --nav-height: 86px;
  --topbar-height: clamp(80px, 26px + 6vw, 110px);
  --breadcrumbs-height: 34px;
  --header-height: var(--topbar-height);

  /* Header layout - aligned with content container */
  --header-max-width: var(--container-max-width);
  --header-logo-width: 100px;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --border-radius-pill: 100px;
  --border-radius-xxl: 48px;
  --border-radius-xl: 24px;
  --border-radius-l: 16px;
  --border-radius-m: 8px;
  --border-radius-s: 4px;
  --border-radius-xs: 3px;

  /* ============================================
     ICON SIZES
     ============================================ */
  --icon-size-xxl: 72px;
  --icon-size-xl: 48px;
  --icon-size-l: 32px;
  --icon-size-m: 24px;
  --icon-size-s: 20px;
  --icon-size-xs: 16px;


  /* ============================================
     ANIMATION
     ============================================ */
  --cubic-bezier-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --fade-transition: opacity 0.6s var(--cubic-bezier-1), transform 0.6s var(--cubic-bezier-1);

  /* ============================================
     BUTTON TOKENS
     Synced with Figma
     ============================================ */

  /* Button sizing - from Figma */
  --btn-padding-x: 20px;
  --btn-padding-y: 12px;
  --btn-border-radius: var(--border-radius-pill);
  --btn-font-size: 16px;
  --btn-line-height: 20px;
  --btn-font-weight: 400;
  --btn-border-width: 1.5px;

  /* Button size variants - from Figma */
  --btn-height-sm: 32px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;
  --btn-padding-y-sm: 6px;
  --btn-padding-y-md: 12px;
  --btn-padding-y-lg: 16px;
  --btn-font-size-sm: 14px;
  --btn-font-size-lg: 18px;

  /* Primary button */
  --btn-primary-bg: var(--digicert-blue);
  --btn-primary-fg: var(--digicert-white);
  --btn-primary-bg-hover: color-mix(in srgb, var(--digicert-blue), var(--digicert-white) 15%);
  --btn-primary-bg-active: color-mix(in srgb, var(--digicert-blue), var(--digicert-black) 20%);

  /* Primary light variant states (for dark backgrounds) */
  --btn-primary-bg-hover-light: color-mix(in srgb, var(--digicert-white), var(--digicert-neutral-200) 15%);
  --btn-primary-bg-active-light: color-mix(in srgb, var(--digicert-white), var(--digicert-neutral-200) 25%);

  /* Transparent button (light backgrounds) */
  --btn-transparent-hover: color-mix(in srgb, var(--digicert-white), var(--digicert-blue) 10%);
  --btn-transparent-active: color-mix(in srgb, var(--btn-transparent-hover), var(--digicert-blue) 15%);

  /* Transparent button (dark backgrounds) */
  --btn-transparent-hover-on-dark: rgb(255 255 255 / 10%);
  --btn-transparent-active-on-dark: rgb(255 255 255 / 20%);

  /* Primary light variant (for dark backgrounds) */
  --btn-primary-bg-light: var(--digicert-white);
  --btn-primary-fg-light: var(--digicert-blue);

  /* Primary dark variant (for light backgrounds) */
  --btn-primary-bg-dark: var(--digicert-blue);
  --btn-primary-fg-dark: var(--digicert-white);

  /* Secondary button */
  --btn-secondary-bg: var(--light-color);
  --btn-secondary-fg: var(--text-color);
  --btn-secondary-bg-light: var(--light-color);
  --btn-secondary-fg-light: var(--text-color);
  --btn-secondary-bg-dark: var(--overlay-dark);
  --btn-secondary-fg-dark: var(--digicert-white);

  /* Outlined button */
  --btn-outlined-border: currentcolor;
  --btn-outlined-fg: currentcolor;
  --btn-outlined-border-light: var(--digicert-white);
  --btn-outlined-fg-light: var(--digicert-white);
  --btn-outlined-border-dark: var(--digicert-black);
  --btn-outlined-fg-dark: var(--digicert-black);

  /* Text button */
  --btn-text-fg: var(--link-color);
  --btn-text-fg-light: var(--digicert-white);
  --btn-text-fg-dark: var(--digicert-black);
}

/* ============================================
   TABLET OVERRIDES
   Synced with Figma - breakpoint at 600px
   ============================================ */
@media (width >= 600px) {
  :root {
    /* Heading sizes - tablet - Synced with Figma */
    --heading-font-size-xxl: 54px;
    --heading-font-size-xl: 41px;
    --heading-font-size-l: 30px;
    --heading-font-size-m: 26px;
    --heading-font-size-s: 21px;
  }
}

/* ============================================
   DESKTOP OVERRIDES
   Synced with Figma - breakpoint at 900px
   ============================================ */
@media (width >= 900px) {
  :root {
    /* Heading sizes - desktop - Synced with Figma */
    --heading-font-size-xxl: 70px;
    --heading-font-size-xl: 48px;
    --heading-font-size-l: 36px;
    --heading-font-size-m: 32px;
    --heading-font-size-s: 24px;

    /* Layout - match header alignment */
    --container-max-width: 1264px;
    --container-padding: 32px;
  }

  body[data-breadcrumbs] {
    --header-height: calc(var(--nav-height) + var(--breadcrumbs-height));
  }
}