/* ============================================================================
 * Dataro Design System — Colors & Type
 * Source: dataro-product-design-starter/app/dataro-theme.css
 * ==========================================================================*/

@font-face {
  font-family: "Hedvig Letters Serif";
  src: url("./fonts/HedvigLettersSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Manrope + Paper Mono pulled from Google Fonts (see README — Paper Mono
   is a placeholder substitution for the design-system-specified monospace). */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* --- Font stacks ---------------------------------------------------- */
  --font-hedvig: "Hedvig Letters Serif", ui-serif, Georgia, serif;
  --font-manrope: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* --- Label tokens (text colors) ----------------------------------- */
  --dataro-label-base:    #18181B; /* default body text */
  --dataro-label-title:   #09090B; /* headings (strongest) */
  --dataro-label-muted:   #71717A; /* secondary text */
  --dataro-label-faint:   #A1A1AA; /* tertiary / placeholder */
  --dataro-label-link:    #6D28D9;
  --dataro-label-error:   #EF4444;
  --dataro-label-success: #16A34A;
  --dataro-label-warning: #B45309;

  /* --- Control tokens (buttons, inputs, switches) ------------------- */
  --dataro-control-base:           #6D28D9; /* primary purple */
  --dataro-control-base-disabled:  #6D28D9;
  --dataro-control-neutral:        #27272A; /* primary neutral button */
  --dataro-control-neutral-disabled:#27272A;
  --dataro-control-secondary:      #F4F4F5;
  --dataro-control-sub:            #F5F3FF; /* purple tint */
  --dataro-control-muted:          #EDE9FE; /* stronger purple tint */
  --dataro-control-hovered:        #F4F4F5;
  --dataro-control-border:         #D4D4D8;
  --dataro-control-label:          #FFFFFF;
  --dataro-control-error:          #EF4444;
  --dataro-control-error-muted:    #FCA5A5;

  /* --- Background tokens (surfaces) --------------------------------- */
  --dataro-bg-surface: #FFFFFF; /* card surface */
  --dataro-bg-base:    #FAFAFA; /* app background */
  --dataro-bg-sub:     #F4F4F5; /* subtle fills */
  --dataro-bg-border:  #E4E4E7; /* hairline borders */
  --dataro-bg-shade:   #E4E4E7;
  --dataro-bg-hovered: rgba(228, 228, 231, 0.30);
  --dataro-bg-warning: #FBBF24;

  /* --- Legacy aliases ----------------------------------------------- */
  --dataro-purple:        #6D28D9;
  --dataro-purple-hover:  #6D28D9CC;
  --dataro-neutral:       #27272A;
  --dataro-neutral-hover: #27272ACC;
  --dataro-focus-ring:    oklch(0.706 0.024 56.37 / 25%);

  /* --- Semantic aliases (for agent convenience) --------------------- */
  --fg-1:     var(--dataro-label-title);
  --fg-2:     var(--dataro-label-base);
  --fg-muted: var(--dataro-label-muted);
  --fg-faint: var(--dataro-label-faint);
  --bg-1:     var(--dataro-bg-surface);
  --bg-2:     var(--dataro-bg-base);
  --bg-3:     var(--dataro-bg-sub);
  --border-1: var(--dataro-bg-border);
  --accent:   var(--dataro-control-base);

  /* --- Spacing scale (verified list) -------------------------------- */
  --sp-0: 0px;
  --sp-2: 2px;  --sp-4: 4px;  --sp-6: 6px;  --sp-8: 8px;
  --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px;
  --sp-20: 20px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;

  /* --- Radii -------------------------------------------------------- */
  --radius-sm: 6px;   /* tag/table */
  --radius-md: 8px;
  --radius-lg: 12px;  /* card default */
  --radius-xl: 16px;  /* button, large cards */
  --radius-2xl: 24px; /* prompt card */
  --radius-full: 999px; /* pill tag, toggle */

  /* --- Shadow / elevation ------------------------------------------ */
  /* The Dataro system uses "hairline" shadows, not true drop-shadows.
     Cards and inputs use a 1px inset-style ring via box-shadow. */
  --shadow-hairline: 0 0 0 1px var(--dataro-bg-border);
  --shadow-hairline-soft: 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px var(--dataro-focus-ring);
}

/* ============================================================================
 * Typography — Figma text-style names, 1:1 with dataro-theme.css
 * Headings use Hedvig Letters Serif (-1px tracking on 32/24).
 * Body uses Manrope.
 * ==========================================================================*/

.text-dataro-heading-regular {
  font-family: var(--font-hedvig);
  font-size: 32px; font-weight: 400; line-height: 40px; letter-spacing: -1px;
}
.text-dataro-heading-small {
  font-family: var(--font-hedvig);
  font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: -1px;
}
.text-dataro-heading-compact {
  font-family: var(--font-hedvig);
  font-size: 18px; font-weight: 400; line-height: 24px; letter-spacing: 0;
}

.text-dataro-body-large          { font-family: var(--font-manrope); font-size: 24px; font-weight: 400; line-height: 32px; }
.text-dataro-body-large-medium   { font-family: var(--font-manrope); font-size: 24px; font-weight: 500; line-height: 32px; }
.text-dataro-body-medium         { font-family: var(--font-manrope); font-size: 20px; font-weight: 400; line-height: 28px; }
.text-dataro-body-medium-medium  { font-family: var(--font-manrope); font-size: 20px; font-weight: 500; line-height: 28px; }
.text-dataro-body-regular        { font-family: var(--font-manrope); font-size: 16px; font-weight: 400; line-height: 24px; }
.text-dataro-body-regular-medium { font-family: var(--font-manrope); font-size: 16px; font-weight: 500; line-height: 24px; }
.text-dataro-body-small          { font-family: var(--font-manrope); font-size: 14px; font-weight: 400; line-height: 20px; }
.text-dataro-body-small-medium   { font-family: var(--font-manrope); font-size: 14px; font-weight: 500; line-height: 20px; }
.text-dataro-body-mini           { font-family: var(--font-manrope); font-size: 12px; font-weight: 400; line-height: 16px; }
.text-dataro-body-mini-medium    { font-family: var(--font-manrope); font-size: 12px; font-weight: 500; line-height: 16px; }
.text-dataro-body-mono           { font-family: var(--font-mono);    font-size: 16px; font-weight: 400; line-height: 24px; }
.text-dataro-caption {
  font-family: var(--font-manrope);
  font-size: 12px; font-weight: 400; line-height: 100%;
  letter-spacing: 4px; text-transform: uppercase;
}

/* ============================================================================
 * Semantic type aliases — lets you write h1/h2/p/code cleanly in preview
 * cards and UI kits without touching the Dataro-branded class names.
 * ==========================================================================*/

.type-h1   { font-family: var(--font-hedvig); font-size: 32px; line-height: 40px; letter-spacing: -1px; color: var(--fg-1); font-weight: 400; }
.type-h2   { font-family: var(--font-hedvig); font-size: 24px; line-height: 32px; letter-spacing: -1px; color: var(--fg-1); font-weight: 400; }
.type-h3   { font-family: var(--font-hedvig); font-size: 18px; line-height: 24px; color: var(--fg-1); font-weight: 400; }
.type-subtitle { font-family: var(--font-manrope); font-size: 20px; line-height: 28px; color: var(--fg-2); font-weight: 500; }
.type-body { font-family: var(--font-manrope); font-size: 16px; line-height: 24px; color: var(--fg-2); font-weight: 400; }
.type-body-muted { font-family: var(--font-manrope); font-size: 16px; line-height: 24px; color: var(--fg-muted); font-weight: 400; }
.type-small { font-family: var(--font-manrope); font-size: 14px; line-height: 20px; color: var(--fg-muted); font-weight: 400; }
.type-caps { font-family: var(--font-manrope); font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--fg-muted); font-weight: 500; }
.type-mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--fg-2); }

/* ============================================================================
 * Base reset for preview cards (not for production use)
 * ==========================================================================*/
.dataro-preview {
  font-family: var(--font-manrope);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}
.dataro-preview * { box-sizing: border-box; }