/* =============================================================================
   TOGASHI — Layout System (Grid, Containers, Responsive)
   12-column grid, 1200px max-width, 8px spacing rhythm
   ============================================================================= */

/* --- Container --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--margin-desktop);
        padding-right: var(--margin-desktop);
    }
}

/* --- Grid System --- */
.grid {
    display: grid;
    gap: var(--gutter);
}

.grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Span utilities */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Row span */
.row-span-2  { grid-row: span 2; }

/* Start positions */
.col-start-7 { grid-column-start: 7; }
.col-start-9 { grid-column-start: 9; }

@media (min-width: 768px) {
    .md-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .md-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .md-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .md-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .md-col-span-1  { grid-column: span 1; }
    .md-col-span-2  { grid-column: span 2; }
    .md-col-span-3  { grid-column: span 3; }
    .md-col-span-4  { grid-column: span 4; }
    .md-col-span-5  { grid-column: span 5; }
    .md-col-span-6  { grid-column: span 6; }
    .md-col-span-7  { grid-column: span 7; }
    .md-col-span-8  { grid-column: span 8; }
    .md-col-span-11 { grid-column: span 11; }
    .md-col-span-12 { grid-column: span 12; }
    .md-col-start-7 { grid-column-start: 7; }
    .md-col-start-9 { grid-column-start: 9; }
    .md-row-span-2   { grid-row: span 2; }
}

/* --- Flexbox Utilities --- */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.flex-grow   { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }

.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }

.self-start { align-self: flex-start; }
.self-end   { align-self: flex-end; }
.self-center { align-self: center; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-gutter { gap: var(--gutter); }
.gap-chat { gap: var(--chat-gap); }

/* --- Spacing Utilities --- */
.p-0  { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }

.px-mobile { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
.py-section { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-5xl); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Width/Height --- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-sm { max-width: 320px; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 640px; }
.max-w-2xl { max-width: 768px; }
.max-w-3xl { max-width: 896px; }
.max-w-4xl { max-width: 1024px; }

/* --- Text Alignment --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }

.z-10 { z-index: var(--z-dropdown); }
.z-20 { z-index: var(--z-sticky); }
.z-30 { z-index: var(--z-fixed); }
.z-40 { z-index: var(--z-modal-backdrop); }
.z-50 { z-index: var(--z-modal); }

/* --- Overflow --- */
.overflow-hidden  { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto  { overflow-y: auto; }

/* --- Display --- */
.block  { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.hidden { display: none; }

@media (min-width: 768px) {
    .md-flex   { display: flex; }
    .md-grid   { display: grid; }
    .md-block  { display: block; }
    .md-hidden { display: none; }
    .md-inline-flex { display: inline-flex; }
    .px-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}

@media (max-width: 767px) {
    .sm-hidden { display: none; }
}

/* --- Section Spacing --- */
.section {
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-5xl);
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
}

@media (min-width: 768px) {
    .section {
        padding-left: var(--margin-desktop);
        padding-right: var(--margin-desktop);
    }
}

/* --- Aspect Ratios --- */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-4-3    { aspect-ratio: 4 / 3; }
.aspect-4-5    { aspect-ratio: 4 / 5; }

/* --- Object Fit --- */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }

/* --- Border utilities --- */
.border-outline { border: 1px solid var(--color-outline-variant); }
.border-b-outline { border-bottom: 1px solid var(--color-outline-variant); }
.border-t-outline { border-top: 1px solid var(--color-outline-variant); }

/* --- Rounded --- */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius-default); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* --- Cursor --- */
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }