/* ITCloud Design System — Colors & Type
 * Source: ITCloud Brand Design Guide v1.0 (2024)
 * Import this file to inherit all brand tokens + semantic element styles.
 */

/* Fonts: Arial + Courier New are system fonts — no webfont load needed.
 * If licensed TTF/WOFF2 files are added later, declare them with @font-face
 * in fonts/ and update --font-sans / --font-mono below. */

:root {
  /* ====================================================================
   * COLOR — Primary brand (sampled from official logo)
   * The ITCloud mark is a solid purple disc with a grey "I+" glyph.
   * ==================================================================== */
  --purple-primary: #4404A3;   /* DOMINANT — logo disc, hero backgrounds, primary surfaces */
  --purple-deep:    #2E027A;   /* darker variant for shadow / layered dark */
  --purple-mid:     #5B1FC9;   /* lighter hover / accent purple */
  --grey-mark:      #C4C4C4;   /* the logo's inner glyph grey — use sparingly */
  --white:          #FFFFFF;

  /* Retained from the written brand guide v1.0 as SECONDARY accents.
   * The guide specifies navy + blue; the live logo is purple.
   * Treat these as supporting colours (e.g. for charts, status badges,
   * dashboards) until the conflict is resolved with the client. */
  --navy-deep:   #0B1F3A;
  --navy-mid:    #122B4F;
  --it-blue:     #1A6BC7;   /* action — CTAs, links, highlights */
  --cloud-sky:   #3A9BDC;   /* accent on dark */

  /* Secondary — surfaces + text */
  --ice-blue:    #EDE5FA;   /* tinted fill — re-tuned to a purple-tint off the real mark */
  --off-white:   #F7F5FB;   /* page bg, soft surfaces, cool-warm neutral */
  --charcoal:    #2A2339;   /* high-contrast text on light, slightly warm to pair with purple */
  --slate:       #6E6881;   /* secondary text */
  --border:      #E4DFEF;   /* hairlines, card edges */

  /* Accent — status only (never decorative) */
  --success:     #22C55E;
  --warning:     #F59E0B;
  --danger:      #EF4444;

  /* ====================================================================
   * SEMANTIC COLOR TOKENS
   * ==================================================================== */
  --bg:          var(--off-white);
  --surface:     var(--white);
  --surface-tinted: var(--ice-blue);
  --surface-dark: var(--purple-primary);
  --surface-dark-alt: var(--purple-deep);

  --fg1:         var(--purple-deep); /* primary text on light */
  --fg2:         var(--charcoal);    /* body text */
  --fg3:         var(--slate);       /* muted/secondary */
  --fg-on-dark:  var(--white);
  --fg-accent-on-dark: var(--grey-mark);

  --link:        var(--purple-primary);
  --link-hover:  var(--purple-deep);

  --border-hairline: var(--border);
  --border-strong: var(--slate);

  /* ====================================================================
   * TYPE — Families
   * DM Sans is the Google-fonts substitute the brand guide calls out
   * alongside Arial as the primary sans. Space Mono substitutes for
   * Courier New for mono labels.
   * ==================================================================== */
  --font-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'Courier New', ui-monospace, Menlo, Consolas, monospace;

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

  /* ====================================================================
   * TYPE — Scale (from guide §04)
   * ==================================================================== */
  --fs-hero:    60px;   /* 48–60 */
  --fs-h1:      32px;
  --fs-h2:      24px;
  --fs-h3:      18px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-mono:    12px;
  --fs-cta:     15px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-mono:    0.14em;   /* wide-tracked mono labels */

  /* mono label colour on light: prefer purple over blue */
  --mono-label-color: var(--purple-primary);
  --ls-tight:   -0.01em;
  --ls-normal:  0;

  /* ====================================================================
   * SPACING (from guide §08)
   * ==================================================================== */
  --s-xs:   4px;
  --s-sm:   8px;
  --s-md:   16px;
  --s-lg:   24px;
  --s-xl:   40px;
  --s-2xl:  64px;
  --s-3xl:  96px;

  /* Layout */
  --container-max: 1200px;
  --grid-gutter:   24px;
  --page-pad-desktop: 40px;
  --page-pad-mobile:  20px;

  /* ====================================================================
   * RADII — small, conservative (trustworthy SME IT co.)
   * ==================================================================== */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ====================================================================
   * SHADOWS — restrained, cool blue-tinted
   * ==================================================================== */
  --shadow-xs: 0 1px 2px rgba(46, 2, 122, 0.06);
  --shadow-sm: 0 2px 4px rgba(46, 2, 122, 0.06), 0 1px 2px rgba(46, 2, 122, 0.04);
  --shadow-md: 0 6px 16px rgba(46, 2, 122, 0.08), 0 2px 4px rgba(46, 2, 122, 0.04);
  --shadow-lg: 0 16px 40px rgba(46, 2, 122, 0.14), 0 4px 8px rgba(46, 2, 122, 0.06);
  --shadow-focus: 0 0 0 3px rgba(68, 4, 163, 0.28);
  --shadow-glow: 0 0 32px rgba(91, 31, 201, 0.40);    /* purple glow for dark hero */

  /* ====================================================================
   * MOTION
   * ==================================================================== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ======================================================================
 * BASE + SEMANTIC ELEMENT STYLES
 * ====================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); }

.display, .hero-type {
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--fg1);
}

p { margin: 0 0 var(--s-md); line-height: var(--lh-relaxed); color: var(--fg2); }

small, .small { font-size: var(--fs-small); color: var(--fg3); }

.mono-label,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--purple-primary);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--s-xl) 0; }

::selection { background: var(--ice-blue); color: var(--purple-deep); }

/* Dark-surface helpers */
.on-dark { color: var(--fg-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .eyebrow, .on-dark .mono-label { color: var(--grey-mark); }
.on-dark p { color: rgba(255,255,255,0.82); }