/* ============================================================
   Caid Design System — Colors & Type
   Engineering-paper aesthetic. Graphite-led. Diagnostic accents.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* -------- Palette -------- */
  --paper-white:        #FAFAF7;
  --mist-grey:          #E8EAED;
  --draft-line-grey:    #B8BEC7;
  --graphite:           #2D3138;
  --deep-black:         #050608;

  --opencad-highlight:  #F5F7FA;        /* bold white — corrected/highlight state */
  --fault-amber:        #C8A24A;        /* muted technical yellow, used at fault moments */
  --fault-red:          #C8A24A;        /* alias kept for legacy refs; same as fault-amber */
  --corrected-white:    #F5F7FA;        /* bold white, replaces cyan */
  --corrected-cyan:     #F5F7FA;        /* alias */
  --verify-green:       #4FA86A;        /* deeper green, paired with bold white text */

  /* -------- Semantic surfaces -------- */
  --surface-paper:      var(--paper-white);
  --surface-mist:       var(--mist-grey);
  --surface-graphite:   var(--graphite);
  --surface-black:      var(--deep-black);

  /* The continuous gradient that runs across the whole landing page */
  --surface-gradient:
    linear-gradient(
      to bottom,
      #FAFAF7 0%,
      #EFF0F2 18%,
      #C9CDD3 38%,
      #5C636D 64%,
      #2D3138 82%,
      #0A0C10 96%,
      #050608 100%
    );

  /* -------- Foreground -------- */
  --fg-on-light:        #050608;
  --fg-on-light-2:      #2D3138;
  --fg-on-light-3:      #6B7280;        /* dimensions, axis labels */
  --fg-on-dark:         #F5F7FA;
  --fg-on-dark-2:       #B8BEC7;
  --fg-on-dark-3:       #6B7280;

  /* -------- Lines / borders / grid -------- */
  --hairline-on-light:  rgba(5, 6, 8, 0.10);
  --hairline-on-dark:   rgba(245, 247, 250, 0.10);
  --grid-on-light:      rgba(5, 6, 8, 0.07);
  --grid-on-dark:       rgba(245, 247, 250, 0.08);
  --dot-on-light:       rgba(5, 6, 8, 0.10);
  --dot-on-dark:        rgba(245, 247, 250, 0.10);
  --construction:       rgba(184, 190, 199, 0.55);

  /* -------- Diagnostic states -------- */
  --state-fault:        var(--fault-red);
  --state-corrected:    var(--corrected-cyan);
  --state-verify:       var(--verify-green);

  /* -------- Spacing scale (4px base) -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -------- Radii -------- */
  --radius-0: 0px;
  --radius-1: 2px;     /* default for everything */
  --radius-2: 4px;     /* maximum allowed */

  /* -------- Type families -------- */
  --font-sans: "Inter Tight", "Neue Haas Grotesk", "Söhne", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -------- Type scale --------
     Display 72 / 56 / 40
     Heading 28 / 22 / 18
     Body    16 / 14
     Mono    13 / 11
     Label   11 (uppercase)
  */
  --fs-display-1: 72px;
  --fs-display-2: 56px;
  --fs-display-3: 40px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-mono: 13px;
  --fs-mono-sm: 11px;
  --fs-label: 11px;

  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.5;
  --lh-mono: 1.4;

  /* -------- Motion -------- */
  --ease-precise: cubic-bezier(0.2, 0, 0, 1);
  --ease-plot:    cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fade-fast: 180ms;
  --dur-fade:      260ms;
  --dur-fade-slow: 350ms;
  --dur-plot:      900ms;
  --dur-plot-long: 1200ms;
}

/* ============================================================
   Semantic typographic styles
   ============================================================ */

.caid-display-1,
.caid-display-2,
.caid-display-3,
.caid-h1, .caid-h2, .caid-h3,
.caid-body, .caid-body-sm,
.caid-mono, .caid-mono-sm,
.caid-label {
  font-family: var(--font-sans);
  font-weight: 500;
  color: inherit;
  margin: 0;
  text-wrap: pretty;
}

.caid-display-1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: -0.035em;
  font-weight: 500;
}
.caid-display-2 {
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  font-weight: 500;
}
.caid-display-3 {
  font-size: var(--fs-display-3);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.caid-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.018em;
  font-weight: 500;
}
.caid-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.012em;
  font-weight: 500;
}
.caid-h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.caid-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  font-weight: 400;
}
.caid-body-sm {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  letter-spacing: 0;
  font-weight: 400;
}
.caid-mono, .caid-mono-sm {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
}
.caid-mono     { font-size: var(--fs-mono);    line-height: var(--lh-mono); }
.caid-mono-sm  { font-size: var(--fs-mono-sm); line-height: 1.45; }

.caid-label {
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-on-light-3);
}

/* ============================================================
   Drafting surface helpers
   ============================================================ */

.caid-surface-paper {
  background: var(--surface-paper);
  color: var(--fg-on-light);
}
.caid-surface-graphite {
  background: var(--surface-graphite);
  color: var(--fg-on-dark);
}
.caid-surface-black {
  background: var(--surface-black);
  color: var(--fg-on-dark);
}
.caid-surface-gradient {
  background: var(--surface-gradient);
  color: var(--fg-on-light);
}

/* 64px primary grid + 16px dot grid, on a light surface */
.caid-grid-light {
  background-image:
    linear-gradient(to right,  var(--grid-on-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-on-light) 1px, transparent 1px),
    radial-gradient(circle at center, var(--dot-on-light) 0.75px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px;
  background-position: 0 0, 0 0, 0 0;
}

/* same on dark */
.caid-grid-dark {
  background-image:
    linear-gradient(to right,  var(--grid-on-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-on-dark) 1px, transparent 1px),
    radial-gradient(circle at center, var(--dot-on-dark) 0.75px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px;
}

/* ============================================================
   Buttons
   ============================================================ */

.caid-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: var(--radius-1);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fade-fast) var(--ease-precise),
              border-color var(--dur-fade-fast) var(--ease-precise),
              color var(--dur-fade-fast) var(--ease-precise),
              transform var(--dur-fade-fast) var(--ease-precise);
}

.caid-btn-primary {
  background: var(--deep-black);
  color: var(--paper-white);
  border-color: var(--deep-black);
}
.caid-btn-primary:hover { background: #1A1D22; border-color: #1A1D22; }
.caid-btn-primary:active { transform: translateY(0.5px); background: #000; }

.caid-btn-secondary {
  background: transparent;
  color: var(--fg-on-light);
  border-color: var(--fg-on-light);
}
.caid-btn-secondary:hover { background: rgba(5,6,8,0.04); }
.caid-btn-secondary:active { transform: translateY(0.5px); background: rgba(5,6,8,0.07); }

.caid-btn-on-dark.caid-btn-primary {
  background: var(--paper-white);
  color: var(--deep-black);
  border-color: var(--paper-white);
}
.caid-btn-on-dark.caid-btn-primary:hover { background: #ECEDEE; border-color: #ECEDEE; }
.caid-btn-on-dark.caid-btn-secondary {
  background: transparent;
  color: var(--paper-white);
  border-color: var(--paper-white);
}
.caid-btn-on-dark.caid-btn-secondary:hover { background: rgba(245,247,250,0.06); }