/* ==========================================================================
   Google Stitch Design System Tokens (v2.0)
   Aligns with Google Stitch AI / Gemini UI specifications & Material 3
   ========================================================================== */

:root {
  /* Stitch Primary Brand Tokens */
  --stitch-primary: #8B1E1E;
  --stitch-primary-hover: #721818;
  --stitch-primary-container: #FEF2F2;
  --stitch-on-primary: #FFFFFF;
  --stitch-on-primary-container: #721818;

  /* Stitch Secondary Roast Amber Tokens */
  --stitch-secondary: #D97706;
  --stitch-secondary-hover: #B45309;
  --stitch-secondary-container: #FEF3C7;
  --stitch-on-secondary: #FFFFFF;

  /* Stitch Surfaces & Canvas */
  --stitch-surface: #FFFFFF;
  --stitch-surface-ground: #FAF9F6;
  --stitch-surface-container: #F8FAFC;
  --stitch-surface-container-high: #F1F5F9;
  --stitch-border-subtle: #E2E8F0;
  --stitch-border-focus: #8B1E1E;

  /* Stitch Typography & Text Hierarchy */
  --stitch-text-primary: #0F172A;
  --stitch-text-secondary: #475569;
  --stitch-text-muted: #94A3B8;

  /* Stitch Semantic Status */
  --stitch-success: #16A34A;
  --stitch-success-container: #DCFCE7;
  --stitch-warning: #D97706;
  --stitch-warning-container: #FEF3C7;
  --stitch-error: #DC2626;
  --stitch-error-container: #FEE2E2;
  --stitch-info: #2563EB;
  --stitch-info-container: #DBEAFE;

  /* Stitch Corner Radii Tokens */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
}

/* Custom Scrollbar for Stitch UI Panels */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}


/* Readability pass: preserve the Google AI Studio layout while making dense ERP text easier to scan. */
html { font-size: 16px; }
body { font-size: 15px; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.text-xs { font-size: 0.8125rem !important; line-height: 1.25rem !important; }
.text-sm { font-size: 0.925rem !important; line-height: 1.4rem !important; }
.text-\[10px\] { font-size: 0.72rem !important; line-height: 1rem !important; }
.text-\[11px\] { font-size: 0.76rem !important; line-height: 1.05rem !important; }
table th { letter-spacing: 0.015em; }
button, input, select, textarea { font-size: max(13px, 0.8125rem); }


/* v1.3 blank logic-test readability — same Google AI Studio layout, larger operational text */
@media (min-width: 1024px) {
  body { font-size: 16px; }
  .text-xs { font-size: 0.875rem !important; line-height: 1.3rem !important; }
  .text-sm { font-size: 0.95rem !important; line-height: 1.45rem !important; }
  .text-\[10px\] { font-size: 0.78rem !important; line-height: 1.1rem !important; }
  .text-\[11px\] { font-size: 0.82rem !important; line-height: 1.15rem !important; }
}
button, input, select, textarea, table { letter-spacing: 0; }


/* v1.3.1 usability patch — preserve layout, improve POS/touch/readability */
:root { --timyas-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html, body, button, input, select, textarea { font-family: var(--timyas-font-family); }
button, [role="button"] { touch-action: manipulation; }
input, select, textarea { min-height: 44px; }
@media (pointer: coarse) {
  button { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; }
}

/* v1.3.2 branding/navigation patch */
:root { --timyas-brand-red: #8B1E1E; }
img[alt="Timya's Lechon Manok"], img[alt="Timya's"] { image-rendering: auto; }
@media (pointer: coarse) {
  button, select, input { min-height: 44px; }
}

/* v1.3.3 adaptive/readability patch */
html,body,#root{width:100%;min-width:0;max-width:100%;overflow-x:hidden;}
body{touch-action:pan-x pan-y;}
button,input,select,textarea{font:inherit;}
@media (max-width: 767px){
  .timyas-mobile-stack{display:block!important;}
  table{font-size:13px;}
}


/* v1.3.3B viewport/scroll stability hotfix */
html, body, #root { height: 100%; }
body { margin: 0; overflow: hidden; }
/* Login can scroll independently on short screens; ERP content scrolls inside its main pane. */
@media (max-width: 767px) {
  .timyas-login-hero { display: none !important; }
}


/* v1.3.5 enterprise density / square-corner refinement */
:root {
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 9px;
  --radius-xl: 11px;
}
/* Override excessive utility rounding while preserving intentional pills/circles. */
.rounded-3xl, .rounded-2xl { border-radius: 10px !important; }
.rounded-xl { border-radius: 7px !important; }
.rounded-lg { border-radius: 6px !important; }
.rounded-md { border-radius: 5px !important; }
/* Keep true pills and avatars circular. */
.rounded-full { border-radius: 9999px !important; }

/* Slightly denser desktop workspace (~10% less visual bulk without browser zoom). */
@media (min-width: 1024px) {
  .timyas-app-main { padding: 1.35rem !important; }
  .timyas-app-header { height: 58px !important; }
}
.input { width:100%; min-height:44px; padding:.65rem .75rem; border:1px solid #CBD5E1; border-radius:5px; background:#fff; color:#0F172A; font-size:.925rem; }
.input:focus { outline:2px solid rgba(139,30,30,.18); border-color:#8B1E1E; }


/* v1.3.6 professional typography + adaptive header controls */
:root { --timyas-font-family: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html, body, button, input, select, textarea, table { font-family: var(--timyas-font-family) !important; }
select option { color:#0F172A; background:#FFFFFF; }
.timyas-brand-title { font-weight:800; letter-spacing:.015em; color:#fff; white-space:nowrap; }
.timyas-brand-subtitle { font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.72); }
@media (max-width: 767px){ .timyas-brand-copy{display:none!important;} }


/* v1.4.2 Timyas brand accent refinement: red primary, dark green structure, yellow highlight */
:root{--timyas-green:#1F5B3A;--timyas-yellow:#F4C430;}
header.bg-\[\#8B1E1E\]{box-shadow:inset 0 -3px 0 var(--timyas-yellow);}
aside{border-right:3px solid var(--timyas-green);}
main h1{letter-spacing:-0.02em;}

/* v1.4.3 UI/UX interaction patch: Timyas red/yellow/green accent system */
.timyas-card{position:relative;border-radius:6px!important;box-shadow:0 2px 8px rgba(15,23,42,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden;}
.timyas-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#8B1E1E;}
.timyas-accent-red::before{background:#8B1E1E}.timyas-accent-green::before{background:#1F5B3A}.timyas-accent-yellow::before{background:#F4C430}
@media (hover:hover) and (pointer:fine){.timyas-card:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 12px 28px rgba(15,23,42,.13);border-color:#cbd5e1}.timyas-card:active{transform:translateY(-1px) scale(.996)}}
@media (prefers-reduced-motion:reduce){.timyas-card{transition:none!important}.timyas-card:hover,.timyas-card:active{transform:none!important}}
.timyas-map-pin{background:transparent!important;border:0!important;}

/* v1.4.4 QA density patch — desktop defaults to ~82% internal scale, mobile stays touch-readable. */
@media (min-width: 1024px) {
  body { font-size: 13.25px !important; }
  button, input, select, textarea { min-height: 38px; }
  .timyas-app-main { padding: 1.1rem !important; }
}
@media (max-width: 1023px) {
  html { font-size: 100% !important; }
  body { font-size: 15px !important; }
  button, input, select, textarea { min-height: 44px; }
}