/* ============================================================
   CopySight — Colors & Type
   Source: design-system-export/design-tokens.css
   ============================================================ */

/* Webfont — Grato Grotesk by TypeMates, self-hosted (4 weights). */
@font-face {
  font-family: "Grato Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Grato-Grotesk-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Grato Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Grato-Grotesk-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Grato Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Grato-Grotesk-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Grato Grotesk";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/Grato-Grotesk-Black.woff2") format("woff2");
}

:root {
  /* ── Brand & Surfaces ─────────────────────────────────── */
  --color-page-bg:        #EEEEF5;          /* canvas — soft warm lavender-gray */
  --color-header-bg:      #FFFFFF;
  --color-card-bg:        rgb(243, 243, 243);
  --color-card-bg-alt:    rgb(243, 244, 246);
  --color-header-border:  rgba(2, 2, 10, 0.08);

  /* ── Brand Color ──────────────────────────────────────── */
  --color-blue:           rgb(0, 122, 255);     /* primary action / hover / active */
  --color-blue-50:        rgb(239, 246, 255);   /* tinted surface for upload icon ring */

  /* ── Neutrals ─────────────────────────────────────────── */
  --color-black:          rgb(2, 2, 10);        /* primary text */
  --color-gray-900:       rgb(17, 24, 39);      /* card headings */
  --color-gray-700:       rgb(55, 65, 81);      /* gauge score, settings icon */
  --color-gray-600:       rgb(75, 85, 99);      /* secondary text */
  --color-gray-500:       rgb(107, 114, 128);   /* captions, sub-labels */
  --color-gray-300:       rgb(209, 213, 219);   /* dashed dropzone border */
  --color-gray-200:       rgb(229, 231, 235);   /* gauge / spinner track (#e5e7eb) */
  --color-gray-100:       rgb(243, 244, 246);   /* card surfaces, toggle bg */
  --color-white:          #FFFFFF;

  /* ── Semantic — Similarity Levels ─────────────────────── */
  --color-similarity-high:    #ef4444;          /* 90 %+  red */
  --color-similarity-medium:  #f97316;          /* 70–89  orange */
  --color-similarity-low:     #f59e0b;          /* 50–69  amber */
  --color-success:            rgb(34, 197, 94); /* no matches / check */

  /* ── Overlays ─────────────────────────────────────────── */
  --color-overlay-white-90:   rgba(255,255,255,0.9);
  --color-overlay-white-80:   rgba(255,255,255,0.8);
  --color-overlay-drag:       rgba(0, 0, 0, 0.18);

  /* ── Typography ───────────────────────────────────────── */
  --font-family:          "Grato Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-regular:         400;
  --font-medium:          500;
  --font-bold:            700;
  --font-black:           900;

  --text-xs:              12px;   /* lh 16 — captions, version tags, similarity labels */
  --text-sm:              14px;   /* lh 20 — pill buttons, sub-text, toggle labels */
  --text-base:            16px;   /* lh 24 — meta rows, body */
  --text-lg:              18px;   /* lh 28 — panel titles, card names */
  --text-xl:              20px;   /* lh 28 — dropzone headline, result headline */

  /* ── Spacing (8px rhythm) ─────────────────────────────── */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;   /* col gap between panels */
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             46px;   /* pad-top below header */
  --space-14:             56px;   /* horizontal page margin (desktop) */

  /* ── Layout ───────────────────────────────────────────── */
  --canvas-width:         1280px;
  --canvas-height:        895px;
  --header-height:        68px;
  --left-panel-width:     600px;
  --right-panel-width:    544px;
  --card-height:          639px;
  --result-card-height:   148px;
  --col-gap:              24px;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm:            4px;    /* bbox label pill */
  --radius-md:            6px;    /* icon button, active toggle pill */
  --radius-lg:            8px;    /* replace pill, settings, version toggle */
  --radius-xl:            12px;   /* result cards */
  --radius-2xl:           16px;   /* image card, analyzing card */
  --radius-full:          9999px; /* upload icon ring */

  /* ── Shadow ───────────────────────────────────────────── */
  --shadow-sm:            rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-drag:          0 8px 32px rgba(0, 0, 0, 0.32);

  /* ── Borders ──────────────────────────────────────────── */
  --border-header:        1px solid rgba(2, 2, 10, 0.08);
  --border-dropzone:      2px dashed rgb(209, 213, 219);
  --border-hover:         2px solid rgb(0, 122, 255);
  --border-track:         2px solid #e5e7eb;
}

/* ============================================================
   Semantic Type Roles
   ============================================================ */

.cs-h1,
.cs-page-title {
  font-family: var(--font-family);
  font-size: var(--text-xl);
  line-height: 28px;
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
  letter-spacing: -0.005em;
}

.cs-h2,
.cs-panel-title {
  font-family: var(--font-family);
  font-size: var(--text-lg);
  line-height: 28px;
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
}

.cs-card-name {
  font-family: var(--font-family);
  font-size: var(--text-lg);
  line-height: 28px;
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
}

.cs-body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
}

.cs-meta {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: 20px;
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
}

.cs-caption {
  font-family: var(--font-family);
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
}

.cs-user-name {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--font-medium);
  color: var(--color-black);
}

.cs-user-email {
  font-family: var(--font-family);
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--font-regular);
  color: var(--color-gray-500);
}

.cs-pill-label {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
}

/* All-caps similarity tags ("HIGH", "MEDIUM", "LOW", "SIMILARITY") */
.cs-tag {
  font-family: var(--font-family);
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--font-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Dropzone headline */
.cs-dropzone-headline {
  font-family: var(--font-family);
  font-size: var(--text-xl);
  line-height: 28px;
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
}

/* Page surface */
.cs-page {
  background-color: var(--color-page-bg);
  font-family: var(--font-family);
  color: var(--color-black);
}