/* =========================================================================
   Tailor design tokens — sourced from tailor-app/src/frontend
   - Colours: src/constants/colors.js + tailwind.config.js
   - Type: Overused Grotesk + Funnel Display + Inter (src/styles/fonts/)
   - Radius: src/styles/globals.css (--radius: 0.5rem)
   ========================================================================= */

/* Fonts — paths mirror those preserved under /fonts/ */
@font-face {
  font-family: "Overused Grotesk";
  src: url("./fonts/OverusedGrotesk-Roman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("./fonts/OverusedGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("./fonts/OverusedGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("./fonts/OverusedGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("./fonts/FunnelDisplay-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("./fonts/FunnelDisplay-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("./fonts/FunnelDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("./fonts/FunnelDisplay-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* -------- Primary brand ramp (tt-brand-color-*) -------- */
  --tt-brand-color-50:  #f5f0ff;
  --tt-brand-color-100: #ebe0fa; /* derived for card backgrounds */
  --tt-brand-color-200: #e0d0f5;
  --tt-brand-color-300: #c5a2f2;
  --tt-brand-color-400: #a27bdb;
  --tt-brand-color-500: #7E57C2; /* PRIMARY */
  --tt-brand-color-600: #5e3d96;
  --tt-brand-color-700: #4a2f76;
  --tt-brand-color-800: #362258;
  --tt-brand-color-900: #241740;
  --tt-brand-color-950: #120b20;

  /* alpha purples used in highlight overlays */
  --tt-purple-20: rgba(126, 87, 194, 0.125);
  --tt-purple-40: rgba(126, 87, 194, 0.251);
  --tt-purple-60: rgba(126, 87, 194, 0.376);
  --tt-purple-80: rgba(126, 87, 194, 0.502);

  /* -------- Royal purple (deep foreground) -------- */
  --tt-royal-100: #201140;
  --tt-royal-80:  #201140;
  --tt-royal-60:  rgba(32, 17, 64, 0.376);
  --tt-royal-40:  rgba(32, 17, 64, 0.251);
  --tt-royal-20:  rgba(32, 17, 64, 0.125);

  /* -------- Tailor neutrals (repo naming) -------- */
  --charcoal-100: #3C3C3C;
  --deep-smoke-100: #BABABA;
  --smoke-100: #DEDEDE;
  --light-smoke-100: #EFEFEF;
  --light-smoke-200: #f8f8f8;
  --white-100: #FFFFFF;

  /* -------- Semantic (Atlassian-lineage palette in colors.js) -------- */
  --success: #36B37E;
  --success-500: #17B26A;
  --success-700: #067647;
  --warning: #FFAB00;
  --error: #FF5630;
  --error-500: #F04438;
  --info: #6554C0;

  /* -------- Status dots (literal values from colors.status) -------- */
  --status-waiting: #06B;
  --status-action: #B50;
  --status-action-return: #8C00BB;
  --status-complete: #080;
  --status-unknown: #A0A0A0;

  /* -------- Accent palette (rapidPurple/lavender/blue/etc used in Fabric) -------- */
  --rapid-purple: #9C5EF2;
  --lavender: #C5A2F2;
  --accent-blue: #5005F2;
  --accent-red: #E45231;
  --accent-yellow: #F0BE36;
  --accent-green: #4BD01F;

  /* -------- Shape -------- */
  --radius: 0.5rem;        /* 8px — Tailwind rounded-lg */
  --radius-md: 0.375rem;   /* 6px — rounded-md */
  --radius-sm: 0.25rem;    /* 4px — rounded-sm */
  --sidebar-width: 260px;

  /* -------- Elevation (from globals.css + Tailwind idioms) -------- */
  --shadow-input: 0 1px 2px 0 rgba(17, 24, 39, 0.05);          /* Tailwind shadow-gray-900/5 */
  --shadow-card:  0 1px 3px 0 rgba(17, 24, 39, 0.06), 0 1px 2px 0 rgba(17, 24, 39, 0.04);
  --shadow-pop:   0 10px 28px -8px rgba(32, 17, 64, 0.15), 0 4px 10px -2px rgba(32, 17, 64, 0.08);

  /* -------- Typography -------- */
  --font-grotesk: "Overused Grotesk", system-ui, sans-serif;
  --font-funnel:  "Funnel Display", system-ui, sans-serif;
  --font-inter:   "Inter", system-ui, sans-serif;
}

/* ---- Base body default mirrors globals.css: bg-white-100 + font-grotesk ---- */
html, body {
  background: var(--white-100);
  color: var(--charcoal-100);
  font-family: var(--font-grotesk);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Link idiom from globals.css .url-link */
.url-link { color: #000; text-decoration: underline; }

/* Polka-dot bg idiom used in tailor-panel backgrounds */
.polka-dot-bg {
  background-image: radial-gradient(var(--tt-purple-40) 1.45px, rgba(239, 239, 239, 0.125) 1.45px);
  background-size: 29px 29px;
}