/* @skin gov2 — stilul comun pentru proiectele gov2.ro · v0.4.0 · 26.10.2026

   Shared skin for posturi.gov2.ro, civtech.gov2.ro, org.gov2.ro and siblings.
   Follows igov.ro's GOV.UK-derived theme (brand.css, 2026-10): Inter + Fragment Mono,
   black header with a brand band, square corners, underlined links, yellow focus,
   green primary button, six-tone status palette. Optional Romanian tricolour band.

   posturi.gov.ro: copy to webapp-php/static/skins/gov2.css.
   Repo: https://github.com/gov2-ro/gov2ro-design-system
   CDN:  https://cdn.jsdelivr.net/gh/gov2-ro/gov2ro-design-system@0.4.0/gov2.css
   Other projects: load this file, set <html data-skin="gov2">, use rgb(var(--c-ink)) etc.
   Colours are RGB channels. Opt-in classes are prefixed .g2-.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fragment+Mono&display=swap');

[data-skin="gov2"] {
  /* Surfaces */
  --c-page:        255 255 255;
  --c-sunken:      243 242 241;  /* #f3f2f1  panels, footer, toolbars, tags */
  --c-surface:     255 255 255;
  --c-line:        177 180 182;  /* #b1b4b6  rules, card borders */
  --c-line-strong: 11 12 12;     /* #0b0c0c  form controls (2px) */

  /* Text */
  --c-ink:       11 12 12;       /* #0b0c0c  19:1 */
  --c-ink-muted: 80 90 95;       /* #505a5f  7:1 */
  --c-ink-faint: 111 119 123;    /* #6f777b  4.6:1, meta only */

  /* Brand + action */
  --c-gov:         29 79 191;    /* #1d4fbf  links */
  --c-gov-visited: 76 44 146;    /* #4c2c92 */
  --c-gov-light:   210 226 241;  /* #d2e2f1  selected rows */
  --c-on-gov:      255 255 255;
  --c-brand:       11 61 145;    /* #0b3d91  header band, footer rule, tile rules */
  --c-gov-bar:       11 12 12;   /* header */
  --c-on-bar:        255 255 255;
  --c-on-bar-muted:  204 204 204;
  --c-on-bar-accent: 140 198 255; /* #8cc6ff  current nav item */

  --c-primary:        0 112 60;  /* #00703c  primary button */
  --c-primary-hover:  0 90 48;   /* #005a30 */
  --c-primary-shadow: 0 45 24;   /* #002d18 */
  --c-secondary-shadow: 146 145 145; /* #929191 */
  --c-danger:        212 53 28;  /* #d4351c  errors, destructive */
  --c-danger-shadow: 85 21 11;

  --c-focus:     255 221 0;      /* #ffdd00 */
  --c-focus-ink: 11 12 12;

  /* Status tones: bg / line / ink. note = warn, alert = bad (names kept for posturi). */
  --c-neutral-bg:  229 230 231; --c-neutral-line:  80 90 95;   --c-neutral-ink:  56 63 67;
  --c-info-bg:     210 226 241; --c-info-line:     29 112 184; --c-info-ink:     12 45 74;
  --c-progress-bg: 219 213 233; --c-progress-line: 76 44 146;  --c-progress-ink: 61 35 117;
  --c-note-bg:     255 247 191; --c-note-line:     181 136 0;  --c-note-ink:     89 77 0;
  --c-ok-bg:       204 226 216; --c-ok-line:       0 112 60;   --c-ok-ink:       0 90 48;
  --c-alert-bg:    244 205 198; --c-alert-line:    212 53 28;  --c-alert-ink:    42 11 6;
  --c-ok-solid:    0 112 60;

  /* Tricolour (decorative only, never text) */
  --c-ro-blue:   0 43 127;       /* #002b7f */
  --c-ro-yellow: 252 209 22;     /* #fcd116 */
  --c-ro-red:    206 17 38;      /* #ce1126 */

  /* Chart ramp: blue series, greys for the rest, ink marks the selection */
  --c-chart-1: 29 112 184;
  --c-chart-2: 11 61 145;
  --c-chart-3: 80 90 95;
  --c-chart-4: 177 180 182;
  --c-chart-sel: 11 12 12;

  /* Type */
  --font-display: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:    "Fragment Mono", ui-monospace, SFMono-Regular, monospace;

  /* Metrics: square, flat */
  --radius:      0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-pill: 0;
  --border-ink:  2px;
  --shadow-lift: none;
  --shell:       1280px;
}

/* ---- Opt-in base ---- */
[data-skin="gov2"] body{margin:0;background:rgb(var(--c-page));color:rgb(var(--c-ink));font:17px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
[data-skin="gov2"] a{color:rgb(var(--c-gov));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
[data-skin="gov2"] a:visited{color:rgb(var(--c-gov-visited))}
[data-skin="gov2"] a:hover{text-decoration-thickness:3px}
[data-skin="gov2"] :focus-visible{outline:3px solid transparent;background:rgb(var(--c-focus));color:rgb(var(--c-focus-ink));box-shadow:0 -2px rgb(var(--c-focus)),0 4px rgb(var(--c-focus-ink));text-decoration:none}
[data-skin="gov2"] :is(input,textarea,select):focus-visible{background:#fff;outline:3px solid rgb(var(--c-focus));outline-offset:0;box-shadow:inset 0 0 0 2px rgb(var(--c-ink))}

/* ---- Header, band, footer ---- */
.g2-header{background:rgb(var(--c-gov-bar));color:rgb(var(--c-on-bar));border-bottom:8px solid rgb(var(--c-brand))}
.g2-header-in{min-height:52px;display:flex;align-items:center;gap:24px}
/* Tricolour variant: the stripe sits above everything (notice bar included); the header drops its blue band. */
.g2-ro-bar{height:6px;background:linear-gradient(90deg,rgb(var(--c-ro-blue)) 33.33%,rgb(var(--c-ro-yellow)) 33.33% 66.66%,rgb(var(--c-ro-red)) 66.66%)}
.g2-header.g2-tricolor{border-bottom:0}
/* Smaller marks; the header keeps its blue band. Decorative: add aria-hidden="true".
   Default for gov2 projects: .g2-ro-corner. */
.g2-header{position:relative}
.g2-ro-corner{position:absolute;top:0;right:24px;width:54px;height:6px;background:linear-gradient(90deg,rgb(var(--c-ro-blue)) 33.33%,rgb(var(--c-ro-yellow)) 33.33% 66.66%,rgb(var(--c-ro-red)) 66.66%)}
.g2-ro-dots{display:inline-flex;gap:4px;margin-left:2px}
.g2-ro-dots::before,.g2-ro-dots::after,.g2-ro-dots>i{content:"";display:block;width:7px;height:7px;border-radius:50%}
.g2-ro-dots::before{background:rgb(var(--c-ro-blue));box-shadow:0 0 0 1px #3a5aa0}
.g2-ro-dots>i{background:rgb(var(--c-ro-yellow))}
.g2-ro-dots::after{background:rgb(var(--c-ro-red))}
/* Notice bar: above the header, dismissible (store the choice, e.g. localStorage). */
.g2-notice-bar{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 24px;background:rgb(var(--c-sunken));border-bottom:1px solid rgb(var(--c-line));font-size:15px}
.g2-notice-bar>button{flex:none;width:44px;height:36px;border:0;background:transparent;color:rgb(var(--c-ink));font-size:22px;cursor:pointer}
.g2-wordmark{display:inline-flex;align-items:center;gap:10px;color:#fff!important;font-size:19px;font-weight:700;letter-spacing:-.03em;text-decoration:none}
.g2-wordmark em{font-style:normal;font-weight:500;color:rgb(var(--c-on-bar-muted))}
.g2-logo{display:block;height:28px;width:auto}
.g2-nav a{color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:0 12px}
.g2-nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.g2-nav a[aria-current=page]{box-shadow:inset 0 -4px rgb(var(--c-on-bar-accent))}
.g2-footer{background:rgb(var(--c-sunken));color:rgb(var(--c-ink));border-top:10px solid rgb(var(--c-brand))}
.g2-footer a{color:rgb(var(--c-ink))}

/* Short tricolour dash for section titles */
.g2-dash{display:block;width:48px;height:4px;background:linear-gradient(90deg,rgb(var(--c-ro-blue)) 33.33%,rgb(var(--c-ro-yellow)) 33.33% 66.66%,rgb(var(--c-ro-red)) 66.66%)}
.g2-dash.g2-red{background:rgb(var(--c-ro-red))}

/* ---- Buttons ---- */
.g2-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:2px solid transparent;border-radius:0;background:rgb(var(--c-primary));color:#fff;font:600 17px/1.2 var(--font-sans);box-shadow:0 2px rgb(var(--c-primary-shadow));cursor:pointer;text-decoration:none}
.g2-btn:hover{background:rgb(var(--c-primary-hover))}
.g2-btn.g2-secondary{background:rgb(var(--c-sunken));color:rgb(var(--c-ink));box-shadow:0 2px rgb(var(--c-secondary-shadow))}
.g2-btn.g2-secondary:hover{background:#dbdad9}
.g2-btn.g2-warning{background:rgb(var(--c-danger));box-shadow:0 2px rgb(var(--c-danger-shadow))}
.g2-btn:focus-visible{background:rgb(var(--c-focus));color:rgb(var(--c-ink));box-shadow:0 2px rgb(var(--c-ink))}
.g2-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- Tags: square, the text names the state ---- */
.g2-tag{display:inline-block;padding:2px 8px;font:600 14px/1.35 var(--font-sans);background:rgb(var(--c-neutral-bg));color:rgb(var(--c-neutral-ink))}
.g2-tag[data-tone=info]{background:rgb(var(--c-info-bg));color:rgb(var(--c-info-ink))}
.g2-tag[data-tone=progress]{background:rgb(var(--c-progress-bg));color:rgb(var(--c-progress-ink))}
.g2-tag[data-tone=warn]{background:rgb(var(--c-note-bg));color:rgb(var(--c-note-ink))}
.g2-tag[data-tone=ok]{background:rgb(var(--c-ok-bg));color:rgb(var(--c-ok-ink))}
.g2-tag[data-tone=bad]{background:rgb(var(--c-alert-bg));color:rgb(var(--c-alert-ink))}

/* ---- Fields ---- */
.g2-input{min-height:40px;padding:5px 8px;border:2px solid rgb(var(--c-ink));border-radius:0;font:17px var(--font-sans);background:#fff;color:rgb(var(--c-ink))}
.g2-field-error{padding-left:15px;border-left:5px solid rgb(var(--c-danger))}
.g2-field-error .g2-input{border-color:rgb(var(--c-danger))}
.g2-error-msg{color:rgb(var(--c-danger));font-weight:700}

/* ---- Panels ---- */
.g2-inset{padding:12px 16px;border-left:5px solid rgb(var(--c-line))}
.g2-notice{border:5px solid rgb(var(--c-info-line));background:rgb(var(--c-info-line))}
.g2-notice>*:first-child{margin:0;padding:2px 15px 7px;color:#fff;font-weight:700}
.g2-notice>*:last-child{margin:0;padding:12px 15px 14px;background:#fff}
.g2-tile{padding:20px;border:1px solid rgb(var(--c-line));border-top:5px solid rgb(var(--c-brand))}
.g2-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){[data-skin="gov2"] *{transition:none!important;animation:none!important}}