/* ===========================================================================
   GRUPO OM DESIGN SYSTEM — tokens + entry point
   Link THIS file in any project. Everything needed ships from here.
   =========================================================================== */

/* ── WEBFONTS ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* ── OM CORPORATE SPECTRUM (the rainbow) ───────────────────────────────── */
  --om-red:       #ea2b2c;
  --om-yellow:    #ebb900;
  --om-green:     #67a14e;
  --om-cyan:      #229ba8;
  --om-blue:      #1b5b88;
  --om-darkblue:  #232252;

  /* ── MEMBER-COMPANY BRAND COLORS ───────────────────────────────────────── */
  --brand-opus:          #be000a;
  --brand-brainbox:      #fbe644;
  --brand-brainbox-blue: #1a1a50;
  --brand-house:         #cece00;
  --brand-senso:         #009d93;
  --brand-tailor:        #173463;
  --brand-dom-blue:      #2f4b91;
  --brand-dom-red:       #cc1c4b;
  --brand-instituto:     #bd0703;
  --brand-instituto-gray:#54534b;
  --brand-om-gray:       #464448;
  --brand-om-gray-light: #e2e4e5;

  /* ── PRIMARY ACTION COLOR ──────────────────────────────────────────────── */
  --primary:      #009d93;
  --primary-dark: #007a70;
  --primary-soft: #e6f7f6;
  --primary-tas:  #2546a6;
  --on-primary:   #ffffff;

  /* ── SEMANTIC SURFACES (LIGHT) ─────────────────────────────────────────── */
  --bg-base:     #f0f2f7;
  --bg-surface:  #ffffff;
  --bg-elevated: #f8f9fc;
  --bg-sunken:   #e8eaf0;

  --text-primary:   #0d1117;
  --text-secondary: #4a5568;
  --text-muted:     #8896a7;
  --text-inverse:   #ffffff;

  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-med:    rgba(0, 0, 0, 0.12);
  --border-strong: #e2e4e5;
  --hover-fill:    rgba(0, 0, 0, 0.04);
  --nav-glass:     rgba(255, 255, 255, 0.88);

  /* ── HEADER / HERO GRADIENT ────────────────────────────────────────────── */
  --header-grad: linear-gradient(135deg, #2c2a39 0%, #1b1c4a 60%, #10173f 100%);
  --header-dark: #0a0a0b;
  --header-glow: rgba(0,196,185,0.34);
  --accent-glow: rgba(103,161,78,0.18);
  --footer-bg:   #464448;

  /* ── BRAND BACKGROUND TINT ───────────────────────────────────────────── */
  --bg-tint: var(--bg-base);

  /* ── STATUS TINTS (light) ──────────────────────────────────────────────── */
  --status-analise-bg:    #fffde6; --status-analise-fg:    #92600a;
  --status-pendente-bg:   #e8edf5; --status-pendente-fg:   #3730a3;
  --status-aprovado-bg:   #f5f5c4; --status-aprovado-fg:   #3a6600;
  --status-finalizado-bg: #e6f7f6; --status-finalizado-fg: #007a70;
  --status-recusado-bg:   #fce8e8; --status-recusado-fg:   #be000a;

  /* ── FEEDBACK ──────────────────────────────────────────────────────────── */
  --success: #63a33d;
  --warning: #ebb900;
  --danger:  #be000a;
  --info:    #cd5b20;

  /* ── THE SIGNATURE RAINBOW ─────────────────────────────────────────────── */
  --rainbow: linear-gradient(90deg,
    #cc2229 0%, #e84e1b 10%, #f39200 20%, #ffec00 30%, #b5bd00 40%,
    #00a651 50%, #009c93 60%, #0068b4 70%, #1b1c4a 82%, #6b2c91 90%, #a31c44 100%);
  --rainbow-simple: linear-gradient(90deg,
    var(--om-red) 0%, var(--om-yellow) 20%, var(--om-green) 40%,
    var(--om-cyan) 60%, var(--om-blue) 80%, var(--om-darkblue) 100%);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
  --font-head: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-2xs: 0.625rem;
  --text-xs:  0.6875rem;
  --text-sm:  0.75rem;
  --text-base:0.8125rem;
  --text-md:  0.875rem;
  --text-lg:  1rem;
  --text-xl:  1.125rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2.25rem;
  --text-5xl: 2.75rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  --lh-tight: 1.1;
  --lh-snug:  1.4;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --track-tight:  -0.01em;
  --track-normal: 0;
  --track-wide:   0.05em;
  --track-wider:  0.1em;
  --track-widest: 0.2em;

  /* ── SPACING (4px grid) ────────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── RADIUS ────────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* ── ELEVATION ─────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.18);
  --shadow-primary: 0 8px 28px rgba(0,157,147,0.35);

  /* ── MOTION ────────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.15s;
  --t-base: 0.22s;
  --t-slow: 0.35s;

  /* ── LAYOUT ────────────────────────────────────────────────────────────── */
  --container:      1080px;
  --container-wide: 1300px;
  --header-h:       76px;
  --navbar-h:       52px;
}

/* ── DARK THEME ─────────────────────────────────────────────────────────────
   Selectors: [data-theme="dark"] (RH Flow), .theme-dark (Intranet), .dark (TAS) */
[data-theme="dark"], .theme-dark, .dark {
  --bg-base:     #0f0f0f;
  --bg-surface:  #1a1a1a;
  --bg-elevated: #242424;
  --bg-sunken:   #080808;
  --bg-tint:     #0f0f0f;

  --text-primary:   #f4f4f5;
  --text-secondary: #c7c7c9;
  --text-muted:     #8a8a8e;
  --text-inverse:   #0f0f0f;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-med:    rgba(255, 255, 255, 0.12);
  --border-strong: #333333;
  --hover-fill:    rgba(255, 255, 255, 0.05);
  --nav-glass:     rgba(15, 15, 15, 0.82);

  --primary:      #00c4b9;
  --primary-dark: #009d93;
  --primary-soft: #0d2626;
  --on-primary:   #ffffff;

  --success: #7cc24f;
  --info:    #e0763a;

  --om-red:      #f53b3c;
  --om-yellow:   #ffc200;
  --om-green:    #72b558;
  --om-cyan:     #25b4c4;
  --om-blue:     #3090cf;
  --om-darkblue: #4a47a3;

  --status-analise-bg:    rgba(252,211,77,0.13);
  --status-analise-fg:    #fcd34d;
  --status-pendente-bg:   rgba(165,180,252,0.13);
  --status-pendente-fg:   #a5b4fc;
  --status-aprovado-bg:   rgba(134,239,172,0.13);
  --status-aprovado-fg:   #86efac;
  --status-finalizado-bg: rgba(0,196,185,0.13);
  --status-finalizado-fg: #00c4b9;
  --status-recusado-bg:   rgba(252,165,165,0.13);
  --status-recusado-fg:   #fca5a5;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.7);
  --shadow-primary: 0 8px 32px rgba(0,196,185,0.4);
}

/* ── BRAND THEMES ─────────────────────────────────────────────────────────── */
html[data-brand="om"] {
  --primary:        #1a1a1a;
  --primary-dark:   #000000;
  --primary-soft:   #ecedef;
  --on-primary:     #ffffff;
  --shadow-primary: 0 8px 28px rgba(0,0,0,0.30);
  --header-grad:    linear-gradient(135deg, #1c1c1c 0%, #0f0f0f 100%);
  --header-glow:    rgba(255,255,255,0.10);
  --accent-glow:    rgba(255,255,255,0.06);
  --footer-bg:      #0f0f0f;
  --bg-tint:        var(--bg-base);
}
html[data-brand="opus"] {
  --primary:        #be000a;
  --primary-dark:   #8a0007;
  --primary-soft:   #fce8e8;
  --shadow-primary: 0 8px 28px rgba(190,0,10,0.35);
  --header-grad:    linear-gradient(135deg, #001a18 0%, #007a70 50%, #00c4b9 100%);
  --header-glow:    rgba(0,196,185,0.40);
  --accent-glow:    rgba(27,91,136,0.20);
  --footer-bg:      #001a18;
  --bg-tint:        #fff8f8;
}
html[data-brand="brainbox"] {
  --primary:        #fbe644;
  --primary-dark:   #d6c213;
  --primary-soft:   #fffce6;
  --on-primary:     #111111;
  --shadow-primary: 0 8px 28px rgba(251,230,68,0.30);
  --header-grad:    linear-gradient(135deg, #0d0d28 0%, #14143e 50%, #1a1a50 100%);
  --header-glow:    rgba(26,26,80,0.45);
  --accent-glow:    rgba(26,26,80,0.22);
  --footer-bg:      #0d0d28;
  --bg-tint:        #fffef0;
}
html[data-brand="house"] {
  --primary:        #cece00;
  --primary-dark:   #9a9c00;
  --primary-soft:   #f8f8de;
  --on-primary:     #111111;
  --shadow-primary: 0 8px 28px rgba(206,206,0,0.20);
  --header-grad:    linear-gradient(135deg, #060d1a 0%, #0e1e3a 55%, #173463 100%);
  --header-glow:    rgba(23,52,99,0.45);
  --accent-glow:    rgba(0,68,140,0.20);
  --footer-bg:      #060d1a;
  --bg-tint:        #fafae8;
}
html[data-brand="senso"] {
  --accent-glow: rgba(23,52,99,0.22);
  --footer-bg:   #001e1c;
}
html[data-brand="tailor"] {
  --primary:        #173463;
  --primary-dark:   #0d1e3a;
  --primary-soft:   #e8edf5;
  --shadow-primary: 0 8px 28px rgba(23,52,99,0.35);
  --header-grad:    linear-gradient(135deg, #001428 0%, #002452 55%, #00448c 100%);
  --header-glow:    rgba(0,68,140,0.45);
  --accent-glow:    rgba(0,157,147,0.22);
  --footer-bg:      #001428;
  --bg-tint:        #f4f6fb;
}
html[data-brand="dom"] {
  --primary:        #2f4b91;
  --primary-dark:   #223668;
  --primary-soft:   #eaeef7;
  --shadow-primary: 0 8px 28px rgba(47,75,145,0.35);
  --header-grad:    linear-gradient(135deg, #001e1c 0%, #007a70 50%, #009d93 100%);
  --header-glow:    rgba(0,157,147,0.40);
  --accent-glow:    rgba(0,157,147,0.20);
  --footer-bg:      #001e1c;
  --bg-tint:        #f4f7fb;
}
html[data-brand="instituto"] {
  --primary:        #bd0703;
  --primary-dark:   #8a0201;
  --primary-soft:   #fce8e8;
  --shadow-primary: 0 8px 28px rgba(189,7,3,0.35);
  --header-grad:    linear-gradient(135deg, #1a1a1c 0%, #464448 55%, #6e7074 100%);
  --header-glow:    rgba(70,68,72,0.35);
  --accent-glow:    rgba(27,91,136,0.22);
  --footer-bg:      #1a1a1c;
  --bg-tint:        #ecedef;
}

/* brand + dark combos */
html[data-brand="om"][data-theme="dark"]        { --primary:#ffffff; --primary-dark:#e2e4e5; --primary-soft:rgba(255,255,255,.12); --on-primary:#111111; --bg-tint:var(--bg-base); }
html[data-brand="opus"][data-theme="dark"]      { --primary:#ff3a3a; --primary-dark:#cc1515; --primary-soft:rgba(255,58,58,.12); --bg-tint:var(--bg-base); }
html[data-brand="brainbox"][data-theme="dark"]  { --primary:#fbe644; --primary-dark:#d6c213; --primary-soft:rgba(251,230,68,.14); --on-primary:#111111; --bg-tint:var(--bg-base); }
html[data-brand="house"][data-theme="dark"]     { --primary:#cece00; --primary-dark:#a8aa00; --primary-soft:rgba(206,206,0,.14); --on-primary:#111111; --bg-tint:var(--bg-base); }
html[data-brand="tailor"][data-theme="dark"]    { --primary:#3090cf; --primary-dark:#1b5b88; --primary-soft:rgba(48,144,207,.12); --bg-tint:var(--bg-base); }
html[data-brand="dom"][data-theme="dark"]       { --primary:#4a6bc0; --primary-dark:#2f4b91; --primary-soft:rgba(74,107,192,.14); --bg-tint:var(--bg-base); }
html[data-brand="instituto"][data-theme="dark"] { --primary:#f53b3c; --primary-dark:#bd0703; --primary-soft:rgba(245,59,60,.12); --bg-tint:var(--bg-base); }

/* ── DISPLAY HELPER ─────────────────────────────────────────────────────── */
.om-display {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  line-height: var(--lh-tight);
}

.om-eyebrow {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* ===========================================================================
   TAS HUB — Blue palette override
   Overrides DS default teal primary with Interno Azul palette.
   =========================================================================== */

:root {
  --primary:      #1a51f4;
  --primary-dark: #0030c2;
  --primary-soft: #bdcdff;
  --shadow-primary: 0 8px 28px rgba(26,81,244,0.35);
}

[data-theme="dark"], .theme-dark, .dark {
  --primary:      #1a51f4;
  --primary-dark: #0030c2;
  --primary-soft: #bdcdff;
  --shadow-primary: 0 8px 32px rgba(26,81,244,0.40);
}

/* ===========================================================================
   Tailwind primary utility overrides
   The pre-compiled tailwind.css has #2546A6 baked in. These rules are loaded
   after tailwind.css and override all primary-color utilities to use the
   CSS variable so the palette stays consistent.
   =========================================================================== */

/* Base utilities */
.bg-primary    { background-color: var(--primary) !important; }
.text-primary  { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.border-t-primary { border-top-color: var(--primary) !important; }
.border-b-primary { border-bottom-color: var(--primary) !important; }
.border-l-primary { border-left-color: var(--primary) !important; }
.border-r-primary { border-right-color: var(--primary) !important; }
.ring-primary  { --tw-ring-color: var(--primary) !important; }
.from-primary  { --tw-gradient-from: var(--primary) !important; }
.to-primary    { --tw-gradient-to: var(--primary) !important; }
.via-primary   { --tw-gradient-via: var(--primary) !important; }
.fill-primary  { fill: var(--primary) !important; }
.stroke-primary { stroke: var(--primary) !important; }
.caret-primary  { caret-color: var(--primary) !important; }
.accent-primary { accent-color: var(--primary) !important; }

/* Opacity variants — color-mix() for modern browsers */
.bg-primary\/5  { background-color: color-mix(in srgb, var(--primary)  5%, transparent) !important; }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
.bg-primary\/15 { background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important; }
.bg-primary\/20 { background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; }
.bg-primary\/25 { background-color: color-mix(in srgb, var(--primary) 25%, transparent) !important; }
.bg-primary\/30 { background-color: color-mix(in srgb, var(--primary) 30%, transparent) !important; }
.bg-primary\/40 { background-color: color-mix(in srgb, var(--primary) 40%, transparent) !important; }
.bg-primary\/50 { background-color: color-mix(in srgb, var(--primary) 50%, transparent) !important; }
.bg-primary\/60 { background-color: color-mix(in srgb, var(--primary) 60%, transparent) !important; }
.bg-primary\/70 { background-color: color-mix(in srgb, var(--primary) 70%, transparent) !important; }
.bg-primary\/80 { background-color: color-mix(in srgb, var(--primary) 80%, transparent) !important; }
.bg-primary\/90 { background-color: color-mix(in srgb, var(--primary) 90%, transparent) !important; }

.text-primary\/50 { color: color-mix(in srgb, var(--primary) 50%, transparent) !important; }
.text-primary\/60 { color: color-mix(in srgb, var(--primary) 60%, transparent) !important; }
.text-primary\/70 { color: color-mix(in srgb, var(--primary) 70%, transparent) !important; }
.text-primary\/80 { color: color-mix(in srgb, var(--primary) 80%, transparent) !important; }

.border-primary\/10 { border-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
.border-primary\/20 { border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; }
.border-primary\/30 { border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important; }
.border-primary\/40 { border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important; }
.border-primary\/50 { border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important; }

.ring-primary\/20 { --tw-ring-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; }
.ring-primary\/30 { --tw-ring-color: color-mix(in srgb, var(--primary) 30%, transparent) !important; }
.ring-primary\/50 { --tw-ring-color: color-mix(in srgb, var(--primary) 50%, transparent) !important; }

/* Hover pseudo-class variants */
.hover\:bg-primary:hover     { background-color: var(--primary) !important; }
.hover\:text-primary:hover   { color: var(--primary) !important; }
.hover\:border-primary:hover { border-color: var(--primary) !important; }

.hover\:bg-primary\/80:hover { background-color: color-mix(in srgb, var(--primary) 80%, transparent) !important; }
.hover\:bg-primary\/90:hover { background-color: color-mix(in srgb, var(--primary) 90%, transparent) !important; }

/* Focus variants */
.focus\:border-primary:focus { border-color: var(--primary) !important; }
.focus\:ring-primary:focus   { --tw-ring-color: var(--primary) !important; }
.focus\:bg-primary:focus     { background-color: var(--primary) !important; }

/* Group-hover variants */
.group:hover .group-hover\:bg-primary { background-color: var(--primary) !important; }
.group:hover .group-hover\:text-primary { color: var(--primary) !important; }

/* Shadow color variant (Tailwind v3 shadow-{color}) */
.shadow-primary { --tw-shadow-color: var(--primary); }
.shadow-primary\/30 { --tw-shadow-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.shadow-primary\/40 { --tw-shadow-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.hover\:shadow-primary\/30:hover { --tw-shadow-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.hover\:shadow-primary\/40:hover { --tw-shadow-color: color-mix(in srgb, var(--primary) 40%, transparent); }