/* ==========================================================================
   Qity Design System — Colors & Type
   Qity builds iQMS (integrated Quality Management System) apps for the
   Atlassian Marketplace (Jira + Confluence). The palette and type stack
   inherit from Atlassian Design System tokens, with Qity's own
   brand-green accent on top.
   ========================================================================== */

/* ---------- Fonts ---------------------------------------------------------
   Primary product UI font: Atlassian Sans (Atlassian's official system face).
   The user uploaded `fonts/AtlassianSans.v3.ttf` + Italic — this is the real
   face used inside Jira/Confluence, so Qity apps rendered on the web now
   ship pixel-identical typography to the live Atlassian product.
   Monospace: Roboto Mono (IDs, ticket keys, code).

   Atlassian Sans is a variable font — one file covers weights 400–700 and
   metrics optimised for UI at 14/20 px. We map it to both `--font-sans`
   (body) and `--font-display` (headings); Atlassian uses a single family.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Atlassian Sans";
  src: url("fonts/AtlassianSans.v3.ttf") format("truetype-variations"),
       url("fonts/AtlassianSans.v3.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atlassian Sans";
  src: url("fonts/AtlassianSansItalic.v3.ttf") format("truetype-variations"),
       url("fonts/AtlassianSansItalic.v3.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

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

:root {
  /* ---------- Type: families ------------------------------------------- */
  --font-sans: "Atlassian Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Atlassian Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type: scale (Atlassian-derived) -------------------------- */
  --text-xs:    11px;  /* tags, captions, table meta */
  --text-sm:    12px;  /* badges, secondary labels */
  --text-base:  14px;  /* body copy, nav, buttons (default) */
  --text-md:    16px;  /* lead paragraph, card subhead */
  --text-lg:    20px;  /* card title, H4 */
  --text-xl:    24px;  /* H3 */
  --text-2xl:   29px;  /* H2 */
  --text-3xl:   32px;  /* page H1 "My Dashboard" */
  --text-4xl:   35px;  /* display */
  --text-5xl:   42px;  /* hero numeric */
  --text-6xl:   64px;  /* OTP/code hero */

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

  /* ---------- Type: line-heights -------------------------------------- */
  --lh-tight:  1.15;
  --lh-snug:   1.25;
  --lh-normal: 1.428;  /* Atlassian body 14/20 */
  --lh-relaxed: 1.5;

  /* ---------- Colors: Qity brand -------------------------------------- */
  --qity-green:       #46DD8F;  /* Logo fill */
  --qity-green-dark:  #2FB874;
  --qity-green-tint:  #E6FAF0;

  /* ---------- Colors: Atlassian neutrals (N-scale) -------------------- */
  --N0:   #FFFFFF;
  --N10:  #FAFBFC;  /* page bg alt */
  --N20:  #F4F5F7;  /* card bg alt / input */
  --N30:  #EBECF0;
  --N40:  #DFE1E6;  /* border default */
  --N50:  #C1C7D0;  /* border strong / disabled icon */
  --N60:  #B3BAC5;
  --N70:  #A5ADBA;
  --N80:  #97A0AF;
  --N90:  #8993A4;
  --N100: #7A869A;  /* subtle icon */
  --N200: #6B778C;  /* muted text / icon */
  --N300: #5E6C84;  /* secondary text */
  --N400: #505F79;  /* ui text */
  --N500: #42526E;  /* heading ink */
  --N600: #344563;
  --N700: #253858;
  --N800: #172B4D;  /* primary text (body heading) */
  --N900: #091E42;  /* nav / highest contrast ink */

  /* ---------- Colors: Atlassian Blue (Brand / Jira) ------------------- */
  --B50:  #DEEBFF;
  --B75:  #B3D4FF;
  --B100: #4C9AFF;
  --B200: #2684FF;
  --B300: #0065FF;
  --B400: #0052CC;  /* primary action */
  --B500: #0747A6;  /* primary action hover */
  --B700: #091E42;

  /* ---------- Colors: Semantic status --------------------------------- */
  --G-surface: #E3FCEF;  /* success bg  — "Released" lozenge */
  --G-text:    #006644;
  --G-bold:    #36B37E;  /* success icon */

  --Y-surface: #FFF0B3;  /* warn / "Draft" / "QA Approval" */
  --Y-text:    #172B4D;
  --Y-bold:    #FFAB00;

  --R-surface: #FFEBE6;  /* error / overdue */
  --R-text:    #BF2600;
  --R-bold:    #FF5630;  /* badge dot */

  --P-surface: #EAE6FF;  /* info / "Document Approval" */
  --P-text:    #403294;
  --P-bold:    #6554C0;

  --T-surface: #E6FCFF;  /* teal — training / secondary */
  --T-text:    #008DA6;
  --T-bold:    #00B8D9;

  /* ---------- Semantic surface & text tokens --------------------------
     Mirrors Atlassian's current token naming:
     `color.background.*`, `color.text.*`, `color.border.*`, `color.icon.*`.
     Raw N-scale values above are kept as fallbacks and to let legacy
     work keep rendering; new code should consume the semantic tokens. */

  --color-background-neutral-default:   var(--N0);   /* page / card surface */
  --color-background-neutral-subtle:    var(--N10);  /* off-white wrapper */
  --color-background-neutral-subtler:   var(--N10);
  --color-background-neutral-hovered:   var(--N20);  /* hover on surface */
  --color-background-neutral-pressed:   var(--N30);
  --color-background-input:             var(--N20);  /* text field fill */
  --color-background-input-hovered:     var(--N30);
  --color-background-selected:          #E9F2FE;     /* side-nav selected */
  --color-background-disabled:          var(--N20);

  --color-text:                         var(--N800); /* body */
  --color-text-subtle:                  var(--N300); /* secondary */
  --color-text-subtlest:                var(--N200); /* muted / meta */
  --color-text-disabled:                var(--N70);
  --color-text-inverse:                 var(--N0);
  --color-text-brand:                   var(--B400);
  --color-text-selected:                #1868DB;     /* selected-nav link */

  --color-icon:                         var(--N500);
  --color-icon-subtle:                  var(--N100);
  --color-icon-inverse:                 var(--N0);

  --color-border:                       var(--N40);  /* hairline default */
  --color-border-bold:                  var(--N50);
  --color-border-focused:               var(--B300);
  --color-border-selected:              var(--B400);

  /* Legacy aliases — keep existing prototypes working */
  --bg-page:        var(--color-background-neutral-default);
  --bg-app:         var(--color-background-neutral-subtle);
  --bg-card:        var(--color-background-neutral-default);
  --bg-input:       var(--color-background-input);
  --bg-hover:       rgba(9, 30, 66, 0.04);
  --bg-pressed:     rgba(9, 30, 66, 0.08);
  --bg-selected:    var(--color-background-selected);
  --bg-banner-warn: var(--color-background-neutral-default);

  --fg-primary:     var(--color-text);
  --fg-heading:     var(--N900);
  --fg-secondary:   var(--color-text-subtle);
  --fg-muted:       var(--color-text-subtlest);
  --fg-disabled:    var(--color-text-disabled);
  --fg-link:        var(--color-text-brand);
  --fg-link-active: var(--color-text-selected);

  --border-subtle:  var(--N30);
  --border-default: var(--color-border);
  --border-strong:  var(--color-border-bold);
  --border-focus:   var(--color-border-focused);

  /* ---------- Elevation / shadows (Atlassian DS) ---------------------- */
  --elev-card:   0 0 1px rgba(9,30,66,0.31), 0 1px 1px rgba(9,30,66,0.25);
  --elev-raised: 0 1px 1px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);
  --elev-overlay: 0 4px 8px -2px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);
  --elev-modal:  0 8px 16px -4px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);

  /* ---------- Radii --------------------------------------------------- */
  --radius-sm: 3px;   /* Atlassian default — cards, buttons, inputs */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (Atlassian 4px base) ---------------------- */
  --space-050: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-800: 64px;
}

/* ==========================================================================
   Semantic type roles (use in HTML): h1, h2, h3, .t-body, .t-caption, etc.
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);          /* Figma shows 32px regular for page H1 */
  color: var(--fg-heading);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-heading);
  margin: 0;
}
h3, .t-h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 24px;
  color: var(--N500);                       /* card title style seen throughout */
  margin: 0;
}
h4, .t-h4 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-heading);
  margin: 0;
}

.t-eyebrow {                                /* e.g. "RECENT ACTIVITY", "FOR YOU" */
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-heading);
}

.t-body {
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--fg-primary);
}
.t-body-md {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}
.t-caption {
  font-size: var(--text-sm);
  line-height: 16px;
  color: var(--fg-secondary);
}
.t-micro {
  font-size: var(--text-xs);
  line-height: 14px;
  color: var(--fg-muted);
  font-weight: var(--fw-bold);
}

code, .t-mono, .t-code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--N700);
}

a, .t-link {
  color: var(--fg-link);
  text-decoration: none;
}
a:hover, .t-link:hover { text-decoration: underline; }